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:;与javascript:void(0)使用介绍
Jun 05 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
jsPDF导出pdf示例
May 02 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 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
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
详解ES6中的let命令
2020/04/05 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
Django实现celery定时任务过程解析
2020/04/21 Python
通过代码实例了解Python异常本质
2020/09/16 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
自我鉴定四大框架
2014/01/17 职场文书
优秀干部获奖感言
2014/01/31 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
体育之星事迹材料
2014/05/11 职场文书
党性心得体会
2014/09/03 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
学生退学证明
2015/06/23 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
mysql sock 文件解析及作用讲解
2022/07/15 MySQL