jquery及原生js获取select下拉框选中的值示例


Posted in Javascript onOctober 25, 2013

现在有一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 相关文章推荐
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 #Javascript
各种常用的JS函数整理
Oct 25 #Javascript
jquery索引在使用中的一些困惑
Oct 24 #Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 #Javascript
js 浏览本地文件夹系统示例代码
Oct 24 #Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 #Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 #Javascript
You might like
yii框架配置默认controller和action示例
2014/04/30 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
PHP运行模式汇总
2016/11/06 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
brook javascript框架介绍
2011/10/10 Javascript
JS定时器实例
2013/04/17 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
python爬虫-模拟微博登录功能
2019/09/12 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
高中生自我鉴定范文
2013/10/30 职场文书
项目管理计划书
2014/01/09 职场文书
腾讯广告词
2014/03/19 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
老干部座谈会主持词
2015/07/03 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
go开发alertmanger实现钉钉报警
2021/07/16 Golang
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
Windows server 2016服务器基本设置
2022/08/14 Servers