下拉框的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. ssd写入量剩余读写次数怎么查

    固态硬盘ssd写入量剩余读写次数怎么查 为什么要查固态硬盘的写入量呢,主要是因为闪存是有写入次数限制的,所以查次数就是看看寿命还有多少,说白了这是对耐久度的一点担忧.其实目前原厂出品的固态硬盘,即便是 ...

  2. Spring 缓存切面

    缓存切面:[通知+目标方法调用] 缓存操作执行过程: 1)如果是同步调用[sync=true],则首先尝试从缓存中读取数据,读取到则直接返回: 否则执行目标方法,将结果缓存后返回. 2)如果不是同步调 ...

  3. Python Module_os_操作系统

    目录 目录 前言 软件环境 os模块内建属性 osname 获取执行平台的类型 oslinesep 输出当前平台使用的行终止符 ossep 输出操作系统特定的路径分隔符 ospathsep 输出用于分 ...

  4. npm link的作用

    语法: 1. 在一个包目录下npm link (把当前的包目录软连接到global folder里面,把二进制文件也软连接到global的bin里面  这个prefix可以用npm config ls ...

  5. 四种方法 恢复损坏的Excel文档

    四种方法 恢复损坏的Excel文档 打开一个以前编辑好的Excel工作簿,却发现内容混乱,无法继续进行编辑,而且还不能够进行打印.这是很多朋友在处理Excel文件时都可能会遇到的一个问题,面对这种情况 ...

  6. 学习 Node.js 的 6 个步骤

    第一步 对于刚接触Node.js的新手来说,第一步无非是打好基础,你需要弄明白以下事情: JavaScript 的特性和语法.假如你对 JavaScript 还不熟悉的话,推荐书籍及链接: JavaS ...

  7. HTML CSS JS 特殊字符(转义)表

    HTML有许多特殊的字符,您对此有多少了解?平时在WEB制作中,您又有用到多少?或者说你在平时使用之时,是否也会碰到,有许多特殊字符要如何打印出来?比如说“笑脸”,比如说“版权号”.要是你用时忘记了这 ...

  8. python3 基本数据类型_1

    不得已,要学习python3了,之前了解到py2与py3有很大不同,不过学起来才能感觉到,比如print. 不过,同样的代码,可以使用py3,py2执行,结果也相似,大家可以看看. 大概因为初学,还未 ...

  9. ipad已停用 连接itunes怎么办

    问题描述: ipad 开机密码多次输入出错后,提示 ipad已停用 连接itunes 解决方法: 参考: https://jingyan.baidu.com/article/fb48e8bee9ef4 ...

  10. linux之网卡绑定

    1 什么是网卡绑定 将多块网卡绑定同一IP地址对外提供服务,可以实现高可用或者负载均衡.直接给两块网卡设置同一IP地址是不可以的.通过bonding,虚拟一块网卡对外提供连接,物理网卡的被修改为相同的 ...