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 Demo模态窗口
Dec 06 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 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
第七节 类的静态成员 [7]
2006/10/09 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
python matlibplot绘制3D图形
2018/07/02 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
三个Unix的命令面试题
2015/04/12 面试题
自考毕业生自我鉴定
2013/11/04 职场文书
董事长岗位职责
2013/11/30 职场文书
益达广告词
2014/03/14 职场文书
设计师求职信模板
2014/05/06 职场文书
班级心理活动总结
2014/07/04 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书