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 相关文章推荐
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
详解Vue之父子组件传值
Apr 01 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 Javascript
微信小程序手动添加收货地址省市区联动
May 18 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 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
PHP合并静态文件详解
2014/11/14 PHP
PHP多文件上传实例
2015/07/09 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
python编写弹球游戏的实现代码
2018/03/12 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
青春寄语大全
2014/04/09 职场文书
《恐龙》教学反思
2014/04/27 职场文书
党支部换届选举方案
2014/05/08 职场文书
交通安全责任书范本
2014/07/24 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
新兵入伍决心书
2015/09/22 职场文书
六年级数学教学反思
2016/02/16 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS