下拉框的onchange事件和onclick，一般最好都选择onchange事件，onclick可能会不兼容有些浏览器。

下面是代码：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>选择</title>
   <script src="js/lib/jquery/v1.12.3/jquery-1.12.3.js"></script>
   <style>
      #one {
         border: 1px solid salmon;
         width: 40px;
         height: 100px;
         position: absolute;
         left: 20px;
      }
      #two {
         border: 1px solid salmon;
         width: 40px;
         height: 100px;
         position: absolute;
         left: 61px;
      }
      #three {
         border: 1px solid salmon;
         width: 40px;
         height: 100px;
         position: absolute;
         left: 102px;
      }
   </style>
   <script>
   function showlist(optvalue){
       if(optvalue=="1"){
         $( "#select1" ).show();
         $( "#select2" ).hide();
         $( "#select3" ).hide();
      }
      else if(optvalue=="2"){
         $( "#select2" ).show();
         $( "#select1" ).hide();
         $( "#select3" ).hide();
      }
      else{
         $( "#select3" ).show();
         $( "#select1" ).hide();
         $( "#select2" ).hide();
      }
   }
   </script>
</head>
<body>
      <div id="one">
         <select name="" id="select1" onchange="showlist(this.value)">
            <option value="1"></option>
            <option value="2"></option>
            <option value="3"></option>
         </select>
      </div>
      <div id="two">
         <select name="" id="select2"
               style="display: none"
               onchange="showlist(this.value)">
            <option value="1"></option>
            <option value="2"></option>
            <option value="3"></option>
         </select>
      </div>
      <div id="three">
         <select name="" id="select3"
               style="display: none"
               onchange="showlist(this.value)">
            <option value="1"></option>
            <option value="2"></option>
            <option value="3"></option>
         </select>
      </div>
   <script>
   $( document ).ready( function()
   {
      //这是onclick事件可能有些不兼容，不推荐使用
      /*var sel = $( "select" );
      var option = sel.children();
      console.log( option );
      for( var i = 0; i < option.length; i++ )
      {
         option[ i ].onclick = function()
         {
            alert( this.value );
            if( this.value ==1 )
            {
               $( "#select1" ).show();
               $( "#select2" ).hide();
               $( "#select3" ).hide();
            }
            else
               if( this.value ==2 )
               {
                  $( "#select2" ).show();
                  $( "#select1" ).hide();
                  $( "#select3" ).hide();
               }
               else
               {
                  $( "#select3" ).show();
                  $( "#select1" ).hide();
                  $( "#select2" ).hide();
               }
         }
      }*/
   } );
   </script>
</body>
</html>

关于下拉框的onchange事件和onclick选择value值。的更多相关文章

  1. LayUI中select下拉框选中触发事件

    代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...

  2. 商品类型的下拉框绑定一个事件，通过ajax获取属性

    html代码这么写 <!-- 商品属性 --> <table cellspacing="1" cellpadding="3" width=&q ...

  3. Html下拉框的定义以及JS、Jquary取值、添加和移除

    现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test"  name=" ...

  4. 下拉框的change事件

    6.1,获取下拉框的值(html标签中没有onchange事件的) <script language="javascript"> $(document).ready(f ...

  5. 点击select下拉框，触发事件

    <div class="controls moneycheck floatleft"> <select class="span12 chosen_cat ...

  6. 给datagridview的下拉框添加valueChange事件

    修改datagridview的EditMode属性为EdutOnEnter,否则需要点2次以上才出现下拉框 1.给DataGridView添加EditingControlShowing事件: 2.编辑 ...

  7. 利用js取到下拉框中选择的值

    现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </ ...

  8. 用MVC的辅助方法自定义了两个控件：“可编辑的下拉框控件”和“文本框日历控件”

    接触MVC也没多长时间,一开始学的时候绝得MVC结构比较清晰.后来入了门具体操作下来感觉MVC控件怎么这么少还不可以像ASP.net form那样拖拽.这样设计界面来,想我种以前没学过JS,Jquer ...

  9. 谈谈如何给下拉框option添加点击事件？

    我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...

随机推荐

  1. Delphi下利用WinIo模拟鼠标键盘详解 有参考价值

    https://blog.csdn.net/fgrass_163/article/details/6365296 Delphi下利用WinIo模拟鼠标键盘详解 2011年04月26日 21:03:00 ...

  2. JavaScript基础之--- 深拷贝与浅拷贝

    理解深拷贝和浅拷贝之前,先来看一下JavaScript的数据类型. 1.基本类型和引用类型 //案例1 var num1 = 1, num2 = num1; console.log(num1) con ...

  3. cocos2dx基础篇(12) 编辑框之一CCTextFieldTTF

    前面我们讲了精灵贴图.标签.菜单.按钮.感觉似乎少了点什么?UI控件里是不是应该还有一个很重要的控件--编辑框.在手机网游中,启动游戏,过了开场动画后,基本上显示的第一个界面应该就是游戏的登录界面了吧 ...

  4. LeetCode.867-转置矩阵（Transpose Matrix）

    这是悦乐书的第332次更新,第356篇原创 01看题和准备 今天介绍的是LeetCode算法题中Easy级别的第202题(顺位题号是867).给定矩阵A,返回A的转置. 矩阵的转置是在其主对角线上翻转 ...

  5. codeforces 1156E Special Segments of Permutation

    题目链接:https://codeforc.es/contest/1156/problem/E 题目大意: 在数组p中可以找到多少个不同的l,r满足. 思路: ST表+并查集. ST表还是需要的,因为 ...

  6. Python基础语法之列表 元组

    1 列表 列表由一系列按照特定顺序的元素组成,其中的元素可以使不同的数据类型,用[ ]来表示列表,用逗号来分割列表中的元素. 1.1 列表操作之切片 a = [1, 2, 3, 4, 5, 6, 7, ...

  7. [每天一课] 今天就讲一讲关于vue-cli 脚手架里 如何调用API

    既然vue-resource停更了,就不讲了,但是效果也是差不多了 今天主要讲一下关于axios的方式来调用API,按照vue-cli的模式,这个当然得先引入一个axios这个模块了.那当然得走一遍终 ...

  8. win10家庭版安装Docker (Docker Toolbox)

    开启CPU的虚拟化功能(自行百度)之前安装了VM所以这部跳过.具体查看可以打开任务管理器->性能->cpu 查看是否有 虚拟化:已启用字样 下载Docker Toolbox  下载地址 h ...

  9. for循环、列表的切片、元组

    一.遍历整个列表 使用for语句循环将列表每取出一个变量,然后存储在中间变量中,打印中间变量:循环取出: 1.简单for循环 示例: carssa = ['richan','fengtian','be ...

  10. 拦截器Interceptor和过滤器Filter的区别

    (1)过滤器(Filter):当你有一堆东西的时候,你只希望选择符合你要求的某一些东西.定义这些要求的工具,就是过滤器.(理解:就是一堆字母中取一个B) (2)拦截器(Interceptor):在一个 ...