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 相关文章推荐
JQuery UI皮肤定制
Jul 27 Javascript
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
javascript几个易错点记录
Nov 26 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
javascript每日必学之封装
Feb 23 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 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
php全排列递归算法代码
2012/10/09 PHP
PHP中比较时间大小实例
2014/08/21 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
php操作MongoDB类实例
2015/06/17 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
python正则表达式抓取成语网站
2013/11/20 Python
在python中的socket模块使用代理实例
2014/05/29 Python
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
养牛场项目建议书
2014/05/13 职场文书
设备售后服务承诺书
2014/05/30 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书