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前端框架关于重构的失败经验分享
Mar 17 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
解决Vue watch里调用方法的坑
Nov 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中Collection 类的设计
2013/06/21 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
Puppet的一些技巧
2018/09/17 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
python交易记录链的实现过程详解
2019/07/03 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
python实现证件照换底功能
2019/08/20 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
动物学专业毕业生求职信
2013/10/11 职场文书
路政管理专业推荐信
2013/11/11 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
模范教师材料大全
2014/12/16 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL