下拉框的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. VSCode - 使用 WSL（Windows Subsystem for Linux）

    一开始我是只将 VSCode 集成的终端改成 WSL 的 Bash,结果发现内置的 GIt 用的还是 Windows 的 Git,Git Hooks 用的 Windows 的环境,上网搜了一下发现有很 ...

  2. web开发中会话跟踪的方法有哪些

    会话跟踪就是浏览器和服务器通信 1.cookie 2.session 3.隐藏input 4.url重写 5.ip地址

  3. 阶段3 1.Mybatis_11.Mybatis的缓存_4 mybatis一对多实现延迟加载

    改成单表查询 首先配置的是select.他需要配置的值是accountDao中的方法,查询所有的账户,但是必须有条件.根据用户的id column配置的是id.因为要用user表的id去关联查询 Ac ...

  4. Spring Boot-配置

    Spring 官方完整文档:https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle Spring 官方配置文档:htt ...

  5. junper防火墙之自摆乌龙

    Juniper防火墙划分三个端口: 1.E0/0连接内网网络,网段是172.16.1.0/24,E0/0的端口ip地址是172.16.1.1,作为内网网络的网关 2.E0/1连接DMZ区域,网段是17 ...

  6. zookeeper设置客户端连接超时被expired

    在网络环境非常差的情况下,使用zookeeper集群往往会遇到连接expired了: 客户端提示连接从ZOO_CONNECTION_STATE变为ZOO_EXPIRED_SEESION_STATE,然 ...

  7. Mybatis-学习笔记（7）缓存机制

    1.一级缓存 SqlSession级别的缓存,使用HashMap存储缓存数据,不同的SqlSession之间的缓存数据区域(HashMap)互不影响. 一级缓存的作用域是SqlSession范围(强调 ...

  8. JAVA知识点总结（六）（集合）

    第十九章 集合 一.数组弊端: 数组长度是固定的,无法继续添加元素. 二.什么是集合: Java提供一个集合类,它的长度是可以改变的,能储存任意的对象,长度随着元素的增加而增加. 三.集合和数组的区别 ...

  9. arm链接脚本

    一. 为什么需要链接脚本 1.1. 从源码到可执行程序(主要有三个步骤:预编译.编译.链接) 1.1.1. 预编译 a. 预编译器执行.譬如C中的宏定义就是由预编译器处理,注释等也是由预编译器处理的. ...

  10. [2019多校联考(Round 6 T3)]脱单计划 (费用流)

    [2019多校联考(Round 6 T3)]脱单计划 (费用流) 题面 你是一家相亲机构的策划总监,在一次相亲活动中,有 n 个小区的若干男士和 n个小区的若干女士报名了这次活动,你需要将这些参与者两 ...