jquery及原生js获取select下拉框选中的值示例
更新时间：2013年10月25日 09:29:02 作者：
有一id=test的下拉框，怎么拿到选中的那个值呢？本文将采用javascript原生的方法及jquery方法（前提是已经加载了jquery库）来简单实现下
现在有一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方法
复制代码 代码如下:
<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数组操作学习之splice()函数入门与精通
这篇文章介绍了JavaScript数组操作中的splice()方法,详细讲解了其定义、语法和用法,并通过实例展示了如何使用该方法进行数组元素的添加、删除和替换,需要的朋友可以参考下2024-11-11
本文主要介绍了js中的循环方式及各种遍历的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要为大家介绍了JavaScript canvas 实现用代码画画示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
本文通过实例给大家分享了原生JS进行前后端同构的相关知识点以及相关代码，有需要的朋友参考学习下。2018-04-04
这篇文章主要介绍了详解es6新增数组方法简便了哪些操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
canvas 真是一个好东西，它给前端插上了想象的翅膀，伴随着 h5 而来，将 web 代入了新的领域。本文将利用anvas复刻苹果发布会环形进度条，感兴趣的可以尝试一下2022-07-07
因业务需要，在网上查找这个问题的解决办法，但是昏天黑地地搞了半天，找到的方法虽然可以实现功能，但是总是会跳出讨厌的“关闭窗口”的提示框，郁闷。2009-01-01
新发现一个骗链接的方法(js读取cookies)，需要的朋友可以参考下。2012-01-01
文字如何实现打字的效果呢?在浏览网页的时候也经常能看到这种效果。本文给大家汇总介绍了几种打字效果的文字特效,文字一个一个地打印在页面上。2015-08-08
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
今天小编就为大家分享一篇layUI使用layer.open,在content打开数据表格,获取值并返回的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
最新评论