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正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
JS实现贪吃蛇游戏
Nov 15 Javascript
微信小程序实现自定义底部导航
Nov 18 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开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
微信支付开发维权通知实例
2016/07/12 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
浅谈js中的this问题
2017/08/31 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
python通过ssh-powershell监控windows的方法
2015/06/02 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
python datetime中strptime用法详解
2019/08/29 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
HR求职自荐信范文
2014/06/21 职场文书
记者节感言
2015/08/03 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android