我们在用到下拉列表框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. [dpdk][hotplug] DPDK网卡设备热插拔

    dpdk pci网卡设备的热插拔. 样例程序如下: ... ... static int driverctl(char* pci) { int pid; pid = fork(); ) { execl ...

  2. DELPHI中完成端口(IOCP)的简单分析(2)

    DELPHI中完成端口(IOCP)的简单分析(2)   今天我写一下关于DELPHI编写完成端口(IOCP)的工作者线程中的东西.希望各位能提出批评意见.上次我写了关于常见IOCP的代码,对于IOCP ...

  3. Jmeter学习之-从数据库取出数据并且校验数据是否准确

    https://www.cnblogs.com/wuyonghuan/p/7479582.html 应用场景:调用某个接口像数据库中插入数据,需要在接口调用完成后查看数据更新或插入的数据是否正确的时候 ...

  4. Spring 学习教程(三):Spring MVC

    1. 用户访问 /index2. 根据web.xml中的配置 所有的访问都会经过DispatcherServlet3. 根据 根据配置文件springmvc-servlet.xml ,访问路径/ind ...

  5. python if 和 else

    money = input("请输入你在学校有多少钱?")if int(money) > 5000: print("这个月可以潇洒潇洒了,每天可以出去吃大餐了.&q ...

  6. Linux平台 Oracle 18c RAC安装Part1:准备工作

    一.实施前期准备工作 1.1 服务器安装操作系统 1.2 Oracle安装介质 1.3 共享存储规划 1.4 网络规范分配 二.安装前期准备工作 2.1 各节点系统时间校对 2.2 各节点关闭防火墙和 ...

  7. Qt 的坐标系统

    QWidget *q = , Qt::WindowStaysOnTopHint); q->setWindowTitle(QObject::tr("父窗口widget")); ...

  8. Oracle 25用户的权限管理

    理解什么是权限 权限指的是执行特定命令或访问数据库对象的权利. 理解权限的作用 (保证)数据库安全性:系统安全性,数据安全性 了解权限的分类 系统权限: 允许用户执行特定的数据库操作,如创建表.创建索 ...

  9. K8S的网络接口CNI及灵雀云的实践

    K8S的网络模型 我们从底层网络来看,分为三个层面.首先是Pod之间的多个容器的网络互通.我们知道,K8S的Pod可以由多个容器组成,这个层面网络互通是比较简单的,因为所有的容器都是共享一个网卡,可以 ...

  10. GreenDao 使用和数据库升级

    1使用方法 一.添加依赖 在bulid.gradle文件下的dependencies下添加所需依赖   compile 'org.greenrobot:greendao:3.2.2' // add l ...