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使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 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
解析wamp5下虚拟机配置文档
2013/06/27 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
python聊天程序实例代码分享
2013/11/18 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
Python 实现一个简单的web服务器
2021/01/03 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
C/C++程序员常见面试题二
2015/11/19 面试题
播音主持女孩的自我评价分享
2013/11/20 职场文书
优秀演讲稿范文
2013/12/29 职场文书
幼儿教师考核制度
2014/01/25 职场文书
个人近期表现材料
2014/02/11 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
2019年工作总结范文
2019/05/21 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
导游词之山海关
2019/12/10 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers