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模板实现方法
Apr 27 Javascript
JS 树形递归实例代码
May 18 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
angular.bind使用心得
Oct 26 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
js实现简单页面全屏
Sep 17 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
Vue父子组件传值的一些坑
Sep 16 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
Cakephp 执行主要流程
2010/03/24 PHP
php disk_free_space 返回目录可用空间
2010/05/10 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
pytorch中tensor的合并与截取方法
2018/07/26 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
销售工作人员的自我评价分享
2013/11/10 职场文书
毕业生找工作推荐信
2013/11/21 职场文书
庆八一活动方案
2014/01/25 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
机械工程师岗位职责
2014/06/16 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
css3带你实现3D转换效果
2022/02/24 HTML / CSS