下拉框的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. 阶段3 1.Mybatis_07.Mybatis的连接池及事务_5 mybatis中使用poolead配置连接的原理分析

    idelConnection是空闲的链接 idelConnection就是ArrayList的数组 如果没有空闲的就new一个 新的connection 一个空闲池,一个活动的池,一个链接过来.空闲池 ...

  2. MySQL 常用报错注入原理分析

    简介 这段时间学习SQL盲注中的报错注入,发现语句就是那么两句,但是一直不知道报错原因,所以看着别人的帖子学习一番,小本本记下来 (1) count() , rand() , group by 1.报 ...

  3. flultter listview异常type '(BuildContext, int) => dynamic' is not a subtype of type '(BuildContext, int) => Widget'

    type '(BuildContext, int) => dynamic' is not a subtype of type '(BuildContext, int) => Widget' ...

  4. Oracle 启用登录终端超时锁定功能

    远程连接oracle 会出现超时连接断开的问题,所以需要修改oracle配置. 修改超时时间10分钟 ALTER PROFILE DEFAULT LIMIT IDLE_TIME 10; 查询修改后的超 ...

  5. win10在文件夹下打开powershell

    快捷键win+R,输入cmd可以直接打开终端命令行窗口 在文件夹下打开终端命令行端口: 在需要的文件夹目录下,按住shift键,在空白处右击,选择在此处打开powershell窗口,即可进行终端命令行 ...

  6. 爬取LeetCode题目——如何发送GraphQL Query获取数据

    前言   GraphQL 是一种用于 API 的查询语言,是由 Facebook 开源的一种用于提供数据查询服务的抽象框架.在服务端 API 开发中,很多时候定义一个接口返回的数据相对固定,因此要获得 ...

  7. Go语言入门篇-环境准备

    一.GO语言特点 静态类型:首先要明确变量类型,如上所示. 编译型:指GO语言要被编译成机器能识别机器代码. GO语言开源. 编程范式:支持“函数式”和“面向对象” GO语言原生的支持并发编程:即GO ...

  8. 配置NAT

    NAT是将IP数据报文报头中的IP地址转换为另-一个IP地址的过程,主要用于实现内部网络(私有IP地址)访问外部网络(公有IP地址)的功能.NAT有3种类型:静态NAT.动态地址NAT以及网络地址端口 ...

  9. MySql日期加天数,小时,分钟...得到新的时间

    在当前的日期上加三天,天数随便改: SELECT date_add(CURRENT_DATE(), interval 3 day); 在指定的日期上加三天: SELECT date_add('2014 ...

  10. PHP_OS的常见值

    PHP_OS是PHP中的一个预定义常量,表示当前操作系统.那么PHP_OS有哪些值可用呢??PHP_OS的值一般可以为:CYGWIN_NT-5.1,Darwin,FreeBSD,HP-UX,IRIX6 ...