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 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
json前后端数据交互相关代码
Sep 19 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
js实现石头剪刀布游戏
Oct 11 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学习笔记之 函数声明(二)
2011/06/09 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
JMS中Topic和Queue有什么区别
2013/05/15 面试题
小学新教师培训方案
2014/02/03 职场文书
四风存在的原因分析
2014/02/11 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
国家助学金感谢信
2015/01/21 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python