本文实例讲述了JS实现select选中option触发事件操作。分享给大家供大家参考,具体如下:

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

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

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

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

这次记住了吧应该

当我们触发select的双击事件时,用ondblclick方法。

当我们要取得select的选中事件时,用document.all['name'].value来获取,其中name是select的名称。

如果我们要得到select的全部的值就用一个for循环来实现。代码如下:

var vi = document.all['list'].length;

for(var i=0;i

document.form2.list(i).value; //form2是

的名称

}

JS实现代码:

‍‍

选项一

选项二

function gradeChange(){

var objS = document.getElementById("pid");

var grade = objS.options[objS.selectedIndex].grade;

alert(grade);

}

jQuery实现代码:

选项1

选项2

选项3

$("#myselect").change(function(){

var opt=$("#myselect").val();

...

});

Javascript获取select下拉框选中的值

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

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

text1

text2

代码:

一、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());

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

本文标题: JS实现select选中option触发事件操作示例

本文地址: http://www.cppcns.com/wangluo/javascript/234446.html

js 多选框被选中触发的事件_JS实现select选中option触发事件操作示例相关推荐

  1. js复选框之全选反选不选

    今日分享:纯js复选框之全选&&反选&&不选 想要了解其用法,首先先得了解它们各自的意思 全选:全部都选中 反选:选中的部分取消,没选中的部分勾选上 不选:全部取消勾选 ...

  2. js中复选框checkbox如何判定为被选中

    在学习的过程中触及到html分离式开发的内容,其中复选框checkbox判定选中对于ajax传数据来说十分重要,故将该篇文章转发留存,方便以后查阅. 要想判定复选框选中状态可以使用: $(" ...

  3. js——全选框 checkbox

    一直会碰见input 全选框的问题,先整理一种情况: 1. <input id="selectAll" type="checkbox" />全选 2 ...

  4. 【绘制】HTML5 Canvas二次方贝塞尔曲线,实现复选框对勾对号,实现圆角三角形,圆角矩形(图文,示例)

    我的处女作<Canvas系列教程>在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作. 教程介绍.教程目录等能在README里查阅. 传送门:https: ...

  5. js阻止子元素事件_JS阻止冒泡和取消默认事件(默认行为)-前端开发博客

    js冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播.使用event.preventDefault()可以取消默认事件.对于冒 ...

  6. js 多选框被选中触发的事件_javascript多选框的触发过程详解

    这篇文章主要介绍了javascript 中select框触发事件过程的分析的相关资料,这里对select 触发过程进行了深入分析,帮助大家理解这部分内容,需要的朋友可以参考下 javascript 中 ...

  7. php js 复选框选中,为每个选中的复选框显示相同的一组问题。 (PHP和JS / Jquery)...

    你可以这样做,它可以帮助你...... HTML function show_ques() { var i = $(this).attr('id').substr(-1); if ($(this).i ...

  8. jq多选按钮值_关于jquery的多选框获取值和状态回显

    最近开发一个新功能模块设计到状态多选框的勾选及查询后状态的回显保留. 需求:在页面当点击状态多选框时 实现option的勾选状态,把对应的option的value值赋给 在form表单的隐藏input ...

  9. JS 原生实现复选框全选反选功能

    ** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个 复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...

最新文章

  1. (总结)RHEL/CentOS 7.x的几点新改变
  2. zabbix proxy 分布式监控
  3. ipad鼠标圆圈变成箭头_【附视频指南】iPad 只能刷剧?来看看我是如何把它武装成生产力工具的!...
  4. openresty 前端开发进阶一之http后端
  5. DSO(dsoframer)的接口文档
  6. metricbeat监控多个linux_Azure 虚拟机内存利用率监控(2)
  7. Linux编程(4)_gcc
  8. TensorFlow Lite 实现首次移植到 Arduino!
  9. windows下设置tomcat自动启动的注意事项
  10. Firefox浏览器无法安装firebug和firepath插件问题解决
  11. 移动办公正在让电子邮件系统变得更有趣
  12. 解决Eclipse中无法直接使用sun.misc.BASE64Encoder及sun.misc.BASE64Decoder的问题---gxl
  13. 关于感染型病毒ramnit和runner的查杀记事
  14. 杨幂穿搭有三宝:露腿,收腰,配饰亮点,赶快马起来
  15. 乐优商城:笔记(六):上传微服务:LyUpload
  16. 5G,V2X强强联手,无人驾驶还会远吗
  17. 微信小程序php开发实例,微信小程序教程之demo:猫眼电影实例
  18. SNPE分析与评测 (2)
  19. 【外行也能看懂的RabbitMQ系列(一)】—— RabbitMQ快速入门篇(内含丰富实例)
  20. 团队协作的三个基本要素——分工 合作 监督

热门文章

  1. matlab如何在文中定义函数
  2. 详解mysql备份恢复的三种实现方式
  3. Postgresql数组操作符及数组函数
  4. Unity 常用快捷键
  5. Booth(布斯)算法——补码乘法运算过程
  6. 一加7充电_一加7T充电、续航能力测评
  7. 2021-07-06 黑盒测试(持续更新)
  8. 浏览器主页被2345劫持捆绑解决方案---极其简单!
  9. Python三方库:RabbitMQ基本使用
  10. MySQL(二)锁 ----- 表锁