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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
js this 绑定机制深入详解
Apr 30 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
第八节--访问方式
2006/11/16 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
javascript 短路法代码精简
2009/08/20 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
微信小程序入门教程
2016/11/18 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
Python lxml模块安装教程
2015/06/02 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
如何通过Python实现标签云算法
2019/07/02 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
python设置表格边框的具体方法
2020/07/17 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
实习鉴定评语
2014/01/19 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers