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 相关文章推荐
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
Ajax PHP简单入门教程代码
2008/04/25 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
jupyter 导入csv文件方式
2020/04/21 Python
详解python datetime模块
2020/08/17 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
介绍一下.net和Java的特点和区别
2012/09/26 面试题
逻辑链路控制协议
2016/10/01 面试题
大学班级计划书
2014/04/29 职场文书
采购部长岗位职责
2014/06/13 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
深入理解go缓存库freecache的使用
2022/02/15 Golang