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 相关文章推荐
arguments对象
Nov 20 Javascript
js 目录列举函数
Nov 06 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
js 自动播放的实例代码
Nov 19 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
js代码编写无缝轮播图
Sep 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
基于php下载文件的详解
2013/06/02 PHP
使用PHP编写发红包程序
2015/07/22 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
python的unittest测试类代码实例
2017/12/07 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
python实现雨滴下落到地面效果
2018/06/21 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
python保留小数位的三种实现方法
2020/01/07 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
公共场所禁烟标语
2014/06/25 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL