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 相关文章推荐
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
详细分析React 表单与事件
Jul 08 Javascript
vue键盘事件点击事件加native操作
Jul 27 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
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
js 格式化时间日期函数小结
2010/03/20 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
XENON基于JSON变种
2010/07/27 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
详解爬虫被封的问题
2019/04/23 Python
Django保护敏感信息的方法示例
2019/05/09 Python
详解用python写一个抽奖程序
2019/05/10 Python
python和php哪个容易学
2020/06/19 Python
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
应付会计岗位职责
2013/12/12 职场文书
九年级化学教学反思
2014/01/28 职场文书
全神贯注教学反思
2014/02/03 职场文书
家长会欢迎标语
2014/06/24 职场文书
金融专业求职信
2014/08/05 职场文书
导游带团欢迎词
2015/09/30 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android