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 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
js 数组操作代码集锦
Apr 28 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
关于微信小程序登录的那些事
Jan 08 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 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
php 文本文件的读取效率
2012/02/10 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
如何使用angularJs
2017/05/08 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
Python描述器descriptor详解
2015/02/03 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
python 解压pkl文件的方法
2018/10/25 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
上海方立数码笔试题
2013/10/18 面试题
Java语言程序设计测试题选择题部分
2014/04/03 面试题
英语专业毕业生自荐信范文
2013/12/31 职场文书
课内比教学心得体会
2014/09/09 职场文书
赔偿协议书范本
2014/09/12 职场文书
辞职信格式范文
2015/05/13 职场文书
运动会入场词
2015/07/18 职场文书
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技