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 相关文章推荐
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
Angular短信模板校验代码
Sep 23 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字符串截取问题
2006/11/28 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
如何使用php实现评委评分器
2015/07/31 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
Python修改Excel数据的实例代码
2013/11/01 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
python算的上脚本语言吗
2020/06/22 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
美国女孩服装购物网站:Justice
2017/03/04 全球购物
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
《雪儿》教学反思
2014/04/17 职场文书
艺术教育实施方案
2014/05/03 职场文书
青春演讲稿范文
2014/05/08 职场文书
农业开发项目建议书
2014/05/16 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
小数乘法教学反思
2016/02/22 职场文书
2019财务转正述职报告
2019/06/27 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis