JS实现select选中option触发事件操作示例


Posted in Javascript onJuly 13, 2018

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

我们在用到下拉列表框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循环来实现。代码如下:

var vi = document.all['list'].length;
for(var i=0;i<vi;i++){
  document.form2.list(i).value; //form2是<form>的名称
}

JS实现代码:

‍‍<select id="pid" onchange="gradeChange()">
  <option grade="1" value="a">选项一</a>
  <option grade="2" value="b">选项二</a>
</select>
<script type="text/JavaScript">
    function gradeChange(){
    var objS = document.getElementById("pid");
    var grade = objS.options[objS.selectedIndex].grade;
    alert(grade);
    }
</script>

jQuery实现代码:

<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>

代码:

一、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 相关文章推荐
js实时监听文本框状态的方法
Apr 26 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
学习Node.js模块机制
Oct 17 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 #Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 #Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 #Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 #Javascript
微信小程序实现tab页面切换功能
Jul 13 #Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 #Javascript
vue项目base64字符串转图片的实现代码
Jul 13 #Javascript
You might like
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
PHP 数字左侧自动补0
2008/03/31 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python os模块学习笔记
2015/06/21 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
python3多线程知识点总结
2019/09/26 Python
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
领导视察欢迎词
2014/01/15 职场文书
金融管理应届生求职信
2014/02/20 职场文书
书法大赛策划方案
2014/06/04 职场文书
安全环保标语
2014/06/09 职场文书
培训督导岗位职责
2015/04/10 职场文书
财务年终工作总结大全
2019/06/20 职场文书
vue实力踩坑之push当前页无效
2022/04/10 Vue.js
python模板入门教程之flask Jinja
2022/04/11 Python
python数据处理之Pandas类型转换
2022/04/28 Python
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers