下拉框的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（固态硬盘）：百科

    ylbtech-硬件-硬盘-SSD(固态硬盘):百科 固态驱动器(Solid State Disk或Solid State Drive,简称SSD),俗称固态硬盘,固态硬盘是用固态电子存储芯片阵列而制 ...

  2. 【工具安装】kali linux 安装教程

    日期:2019-07-14 16:36:21 介绍:使用最新版的 VMware 来安装 kali linux 0x01.下载镜像 首先需要安装 VMware,安装步骤点这里. VMware 安装教程 ...

  3. 安装docker-下载加速、失败、成功安装

    前提:已装VMware虚拟机和Centos系统(具体安装包和过程可以百度) 先看这里:非root身份登录系统需要在下面的命令前加“sudo ”(sudo:代表给权限,用root登录则不需要输入) 一. ...

  4. Grass Planting

    大致题意: 维护一棵树,支持两种操作: P x y x到y路径上的每条边的值+1:Q x y 询问x到y路径上所有边的值的和.Input第一行两个正整数,N,M表示点数和操作数:接下来N-1行每行两个 ...

  5. 社工 - By浏览器 - Google搜索技巧 - 汇总

    google基本语法 Index of: 使用它可以直接进入网站首页下的所有文件和文件夹中 intext: 将返回所有在网页正文部分包含关键词的网页 intitle: 将返回所有网页标题中包含关键词的 ...

  6. 【Qt开发】V4L2 API详解 背景知识 打开设备设置参数

    www.linuxtv.org下,有篇文档详细讲解了V4L2相关知识和体系结构.是V4L2方面最全面的文档.可以通过它学习V4L2的一些思路和想法. http://www.linuxtv.org/do ...

  7. 1000行基本SQL

    /* Windows服务 */ -- 启动MySQL net start mysql -- 创建Windows服务 sc create mysql binPath= mysqld_bin_path(注 ...

  8. kubernetes快速应用入门

    kubectl 就是 api server的客户端工具 创建一个nginx的pod [root@master ~]# kubectl run nginx-deploy --image=nginx:1. ...

  9. idea配置less自动编译

    参考: idea配置less自动编译 1. 电脑安装node.js环境: window下直接上官网下载node.msi文件下载安装即可 安装完成后在命令行执行如下命令表明安装成功 npm -v nod ...

  10. HNUSTOJ 1604:Operations

    1604: Operations 时间限制: 2 Sec  内存限制: 128 MB 提交: 313  解决: 97 [提交][状态][讨论版] 题目描述 You can perform the fo ...