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实现简单验证码提示解决方案
Dec 20 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
js实现纯前端压缩图片
Nov 16 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
基于mysql的论坛(2)
2006/10/09 PHP
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
基于python 字符编码的理解
2017/09/02 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
pandas 空数据处理方法详解
2019/11/02 Python
PyTorch实现AlexNet示例
2020/01/14 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
2014年公司迎新年活动方案
2014/02/24 职场文书
装修设计师求职信
2014/02/26 职场文书
公司活动总结范文
2014/07/01 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
监守自盗观后感
2015/06/10 职场文书
青涩记忆观后感
2015/06/18 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
一条 SQL 语句执行过程
2022/03/17 MySQL
python实现学生信息管理系统(面向对象)
2022/06/05 Python