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 相关文章推荐
JavaScript toFixed() 方法
Apr 15 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
JQuery中clone方法复制节点
May 18 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
vue二级路由设置方法
Feb 09 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
微信小程序实现轮播图指示器
Jun 25 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中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
javascript 写类方式之九
2009/07/05 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
人机交互程序 python实现人机对话
2017/11/14 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
Python如何存储数据到json文件
2020/03/09 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
商务英语专业应届毕业生求职信
2013/10/28 职场文书
医学检验专业个人求职信范文
2013/12/04 职场文书
个人作风剖析材料
2014/02/02 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书