我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发。

想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件

又在select中添加onclick 这下可好了,没选option呢就触发了

百度来的说option没有触发事件,需要在select中加onchange事件,虽然我曾经处理过类似的问题,用过就忘是不是猪脑子....

这次记住了吧应该

当我们触发select的双击事件时,用ondblclick方法。
当我们要取得select的选中事件时,用document.all['name'].value来获取,其中name是select的名称。
如果我们要得到select的全部的值就用一个for循环来实现。

<select name="myselect" id="myselect">
<option value="opt1">选项1</option>
<option value="opt2">选项2</option>
<option value="opt3">选项3</option>
</select> $("#myselect").change(function(){
var opt=$("#myselect").val();
...
});

Javascript获取select下拉框选中的值

现在有一id=test的下拉框,怎么拿到选中的那个值呢?

分别使用javascript原生的方法和jquery方法

<select id="test"  name="">   
  <option   value="1">text1</option>   
  <option   value="2">text2</option>   
 </select>

code:

一:javascript原生的方法

1:拿到select对象: var  myselect=document.getElementById("test");

2:拿到选中项的索引:var index=myselect.selectedIndex ;             // selectedIndex代表的是你所选中项的index

3:拿到选中项options的value:  myselect.options[index].value;

4:拿到选中项options的text:  myselect.options[index].text;

二:jquery方法(前提是已经加载了jquery库)

1:var options=$("#test option:selected");  //获取选中的项

2:alert(options.val());   //拿到选中项的值

3:alert(options.text());   //拿到选中项的文本

谈谈如何给下拉框option添加点击事件?的更多相关文章

  1. 关于iview下拉菜单无法添加点击事件的解决办法

    效果如下图所示,点击下拉菜单,点击退出,然后跳到登录界面 代码如下: <Dropdown trigger="click" style="margin-left: 2 ...

  2. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

  3. JavaScript获取Select下拉框Option的Value和Text值的方法

    Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...

  4. 基于定位下拉框或者需要点击link才显示的下拉框,二次定位与多次定位实现的实际效果区别

    还是基于上次那个练习的后续出现的思考,http://www.cnblogs.com/8013-cmf/p/6555790.html 界面: 源码: 写法如下:  继续解释这两种的区别: 1.其实基于定 ...

  5. 百度“搜索设置”之基于定位下拉框或者需要点击link才显示的下拉框,二次定位与多次定位实现的实际效果区别

    还是基于上次那个练习的后续出现的思考,http://www.cnblogs.com/8013-cmf/p/6555790.html 界面: 源码: 写法如下:  继续解释这两种的区别: 1.其实基于定 ...

  6. 通过jquery来实现文本框和下拉框动态添加效果,能根据自己的需求来自定义最多允许添加数量,实用的jquery动态添加文本框特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JavaScript 下拉框 左边添加至右边

    关于如何实现右边下拉框中选项的排序一时没有好的解决方法,等想到了回来补充 <!DOCTYPE html> <html> <head> <meta charse ...

  8. 实现antd下拉框动态添加内容(与数据库交互)

    antd下拉控件的动态内容添加(与数据库交互) antd这个框架给开发带来了极大的方便,但同时,我认为还有一些不方便的地方:常用的逻辑在文档中没有体现.需要前端开发经验的人才能快速上手,而我刚刚接触这 ...

  9. Web 1三级联动 下拉框 2添加修改删除 弹框

    Web  三级联动 下拉框 using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...

随机推荐

  1. 在IOS应用中打开另外一个应用的解决方案

    最近要在IOS中实现一个应用启动另外一个应用的功能,搜了一些资料,使用UIApplication的openURL:的方法就能实现,现在整理和大家分享一下! 注册自定义URL协议 首先被启动的应用需要向 ...

  2. Web开发——HTML基础(图像、音频和视频内容)

    参考: 参考:HTML中的图像 参考:视频和音频内容 目录: 1.HTML中的图像 1.1 我们如何在网页上放置图像? (1)替代文字(alt) (2)宽度和高度 (3)图片标题 1.2 用图形和图形 ...

  3. Python cffi学习(二)

    上篇文章中讲到Python中调用外部c文件可以有两种方法,一是使用cffi.verify()的形式使用,但是该种方式仍然需要进行函数声明.二是将外部c文件编译成为函数库,然后通过cffi进行使用. 由 ...

  4. Qt中信号(signal)和槽(slot)的几种关联方法

    声明,个人总结,不一定正确! 1.最常见的,使用connect语句.比如:connect(btnSend,SIGNAL(clicked()),this,SLOT(clear()); 2.在 .ui设计 ...

  5. 【Java】NO.120.JDK.1.JDK8.1.001-【Java8实战】

    Style:Mac Series:Java Since:2018-09-26 End:2018-09-26 Total Hours:1 Degree Of Diffculty:5 Degree Of ...

  6. 《linux就该这么学》第四节课笔记,三章和四章开始!

    第三章 (根据课本和在线培训视频排版总结,借鉴请改动)         右键可打开终端练习             3.1:输入输出重定向 输入重定向:符号 "<" ,是一种 ...

  7. 框架——flask知识点回顾

    1. flask--轻量级Web开发框架 2. Flask 没有默认使用的数据库,你可以选择 MySQL,也可以用 NoSQL 3. Web程序框架的意义: 用于搭建Web应用程序 免去不同Web应用 ...

  8. Python之包管理

    1.setup.py from distutils.core import setup setup(name='Distutils', version='1.0', description='Pyth ...

  9. 关于table的td和ul元素li隔行变色的功能实现

    table元素的td和ul元素li隔行变色的功能实现 利用css控制二者的样式轻松实现隔行换色: 例如:table的css样式控制: table tr td{   background-color:颜 ...

  10. The Designer (笛卡尔定理+韦达定理 || 圆的反演)

    Nowadays, little haha got a problem from his teacher.His teacher wants to design a big logo for the ...