下拉框的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. WAMP搭建与配置

    使用WampServer整合软件包进行WAMP环境搭建 WampServer是一款由法国人开发的Apache Web服务器.PHP解释器以及MySQL数据库的整合软件包.免去了开发人员将时间花费在繁琐 ...

  2. 阶段3 1.Mybatis_09.Mybatis的多表操作_4 完成account一对一操作-建立实体类关系的方式

    定义user的实体.然后生成getter和setter 定义一个可以封装Account和User的Map type这里虽然是account类型 这一段只能保证account的数据完成.并不能保证use ...

  3. sql进阶练习题

    student SNO    SNAME    SAGE    SSEX01    赵雷    1990-01-01 00:00:00    男02    钱电    1990-12-21 00:00 ...

  4. 文件类型 | 命令ln | 软链接硬链接

    1.9文件类型 1.9.1常见文件类型 d:目录 -:普通文件 l:链接文件 b:设备 1.9.2文件后缀名 sh:shell脚本 tar.gz:压缩包 my.cnf:配置文件 test.zip:压缩 ...

  5. 前端 CSS 盒子模型 边框 border属性

    边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 border: solid border特性 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样 ...

  6. 分享一个linux中测试网站是否正常的shell脚本

    #! /bin/bash #Author=Harry CheckUrl() { #<==定义函数,名字为CheckUrl timeout=5 #<==定义wget访问的超时时间,超时就退出 ...

  7. java虚拟机学习总结之GC回收算法与GC收集器

    GC回收算法 1.标记清除算法分为标记阶段和清除阶段标记阶段:通过特定的判断方式找出无用的对象实例并将其标记清除阶段:将已标记的对象所占用的内存回收缺点:运行多次以后容易产生空间碎片,当需要一整段连续 ...

  8. net 架构师-数据库-sql server-002-工具

    本章讲述的工具包括: SQL Server 联机丛书 SQL Server配置管理器 SQL Server Management Studio SQL Server Business Intellig ...

  9. 这款多线程中间件，吊打 Redis！

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 今天给大家介绍的是KeyDB,KeyDB项目是从redis fork出来的分支.众所周知redis是一个单线程的kv内存存储 ...

  10. UESTC-1059 秋实大哥与小朋友(离散化+线段树)

    秋实大哥与小朋友 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit  ...