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 相关文章推荐
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
利用python分析access日志的方法
Oct 26 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
微信小程序工具函数封装
Oct 28 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
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
js 判断数据类型的几种方法
2017/01/13 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
详解Python装饰器
2019/03/25 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
单身旅行者的单身假期:Just You
2018/04/08 全球购物
Oracle性能调优原则
2012/05/03 面试题
后进生转化工作制度
2014/01/17 职场文书
小学教师培训感言
2014/02/11 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
学雷锋活动简报
2015/07/20 职场文书
高一语文教学反思
2016/02/16 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers