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 相关文章推荐
jQuery toggle()设置CSS样式
Nov 05 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
写一个Vue loading 插件
Nov 09 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
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个人网站架设连环讲(三)
2006/10/09 PHP
apache rewrite_module模块使用教程
2008/01/10 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
php调用c接口无错版介绍
2014/03/11 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python判断windows隐藏文件的方法
2014/03/21 Python
Python中字符编码简介、方法及使用建议
2015/01/08 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
python中update的基本使用方法详解
2019/07/17 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
python将数组n等分的实例
2019/12/02 Python
python 串行执行和并行执行实例
2020/04/30 Python
python中get和post有什么区别
2020/06/19 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
Python Http请求json解析库用法解析
2020/11/28 Python
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
超市营业员求职简历的自我评价
2013/10/17 职场文书
英语自我评价范文
2014/01/24 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
委托书怎样写
2014/08/30 职场文书
天河观后感
2015/06/11 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
Java基于字符界面的简易收银台
2021/06/26 Java/Android
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers
vue使用element-ui按需引入
2022/05/20 Vue.js