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 按回车键相应按钮提交事件
Nov 02 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 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/19 PHP
PHP Google的translate API代码
2008/12/10 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
JavaScript中的私有成员
2006/09/18 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
详解angular element()方法使用
2017/04/08 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
python中while循环语句用法简单实例
2015/05/07 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
行政副总岗位职责
2014/02/23 职场文书
黄金搭档广告词
2014/03/21 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
2014年终工作总结范本
2014/12/15 职场文书
工地材料员岗位职责
2015/04/11 职场文书
法院执行局工作总结
2015/08/11 职场文书