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 flash激活
Oct 19 Javascript
jQuery 遍历json数组的实现代码
Sep 22 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
angularJS提交表单(form)
Feb 09 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 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创建PDF中文文档
2006/10/09 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
初识PHP中的Swoole
2016/04/05 PHP
实例讲解php数据访问
2016/05/09 PHP
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
Python实现子类调用父类的方法
2014/11/10 Python
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
python实现自动清理重复文件
2020/08/24 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
触电现场处置方案
2014/05/14 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
2014年电厂工作总结
2014/12/04 职场文书
汇报材料怎么写
2014/12/30 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
发票退票证明
2015/06/24 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python
Java 在线考试云平台的实现
2021/11/23 Java/Android
js前端图片加载异常兜底方案
2022/06/21 Javascript
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技