jquery获取选中的文本和值的方法


Posted in Javascript onJuly 08, 2014

1、说明

(1)获取select下拉框选中的索引

$("#selection").get(0).selectedIndex;

(2)获取select下拉框选中的值

$("#selection option:selected").val();

(3)获取select下拉框选中的文本

$("#selection option:selected").text();

2、实现源码

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML xmlns="http://www.w3.org/1999/xhtml"> 
<HEAD> 

<script type="text/javascript" src="../Documents/未命名站点 2/jquery-1.11.0.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("#btn").click(function(){ 
//获取select下拉框索引 
var index = $("#selection").get(0).selectedIndex; 
//获取select下拉框的值 
var selectVal = $("#selection option:selected").val(); 
//获取select下拉框的文本 
var selectText = $("#selection option:selected").text(); 
alert("获取select下拉框索引:" + index + "\n" + "获取select下拉框的值:" + selectVal + "\n" + "获取select下拉框的文本:" + selectText); 
}); 
}); 
</script> 

<DIV id=select_val> 
<SELECT id=selection> <OPTION selected value=0>鲤鱼</OPTION> <OPTION value=1>鳐鱼</OPTION> <OPTION value=2>鲶鱼</OPTION> <OPTION value=3>棒棒鱼</OPTION> <OPTION value=4>小姐鱼</OPTION> <OPTION value=5>红金花罗汉鱼</OPTION> <OPTION value=6>彩虹王罗汉鱼</OPTION> <OPTION value=7>泰金罗汉鱼</OPTION></SELECT> 
</DIV> 
<INPUT id=btn value=获取选中的文本和值 type=button>

3、实现结果

(1)选中第一项

jquery获取选中的文本和值的方法

(2)选中最后一项

jquery获取选中的文本和值的方法

Javascript 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
CSS和Javascript简单复习资料
Jun 29 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 #Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 #Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 #Javascript
Javascript遍历table中的元素示例代码
Jul 08 #Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 #Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 #Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 #Javascript
You might like
解析php常用image图像函数集
2013/06/24 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
js实现日历与定时器
2017/02/22 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
对于Python装饰器使用的一些建议
2015/06/03 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
Python检测生僻字的实现方法
2016/10/23 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
tensorflow 环境变量设置方式
2020/02/06 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
新闻专业学生的自我评价
2014/02/13 职场文书
自主招生推荐信范文
2014/05/10 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android