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 相关文章推荐
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
推荐几个不错的console调试技巧实现
Dec 20 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 fsockopen写的HTTP下载的类
2007/02/22 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
php Session无效分析资料整理
2016/11/29 PHP
js loading加载效果实现代码
2009/11/24 Javascript
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python调用C++程序的方法详解
2017/01/24 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
python字典改变value值方法总结
2019/06/21 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
银行柜员应聘推荐信范文
2013/11/24 职场文书
入党自我评价范文
2014/02/02 职场文书
春节晚会主持词
2014/03/24 职场文书
三八节标语
2014/06/27 职场文书
北京英语导游词
2015/02/12 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python