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对象数组按属性快速排序
Jan 31 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
vue组件系列之TagsInput详解
May 14 Javascript
js正则表达式简单校验方法
Jan 03 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 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 clearstatcache()函数详解
2010/03/02 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
PHP多进程编程实例详解
2017/07/19 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
原生js实现点击轮播切换图片
2020/02/11 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
python opencv之SIFT算法示例
2018/02/24 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
主持人婚宴答谢词
2014/01/28 职场文书
购房协议书范本
2014/04/11 职场文书
活动倡议书范文
2014/05/13 职场文书
体育教师求职信
2014/06/30 职场文书
课外活动总结
2015/02/04 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
公司车队管理制度
2015/08/04 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
python爬虫selenium模块详解
2021/03/30 Python
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL