用jquery获取select标签中选中的option值及文本的示例


Posted in jQuery onJanuary 25, 2018

1.要想使用jquery首先html或者jsp中得引入jquery文件。

用jquery获取select标签中选中的option值及文本的示例

2.话不多说,上代码。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<script type="text/javascript" src="../../../../js/common/jquery-1.6.2.js"></script>
		<script type="text/javascript">
			function doSome(){
				alert($("#sel option:selected").text());//方法一:获取select标签选中的option中的文本。
				alert($("#sel").find("option:selected").text());//方法二:获取select标签选中的option中的文本。
				
				alert($("#sel option:selected").val());//方法一:获取select标签选中的option中的value的值。
				alert($("#sel").find("option:selected").val());//方法二:获取select标签选中的option中的value的值。
				//------------------------------帅气的分割线,,下面有重点--------------------------------
				
				//当option是这样的:<option>cc</option>。即没有value属性的时候。自然也就没有value值。
				//这时候jquery就很纠结:写了段代码让我拿value的值,可是找到的option中根本没有value属性。
				//算了,把option中 的文本拿出来给你吧。
				//所以当选中<option>cc</option>这个option的时候,你会发现上边四个alert出来的值是一样的。都是option中的文本。
				//想要拿到option中的value的值,首先option得有value属性啊!!!
			}
		</script>
	</head>
	
	<body>
		<div>
			<select id="sel" onchange="doSome();">
				<option value="aa">bb</option>
				<option>cc</option>
			</select>
		</div>
	</body>
</html>

以上这篇用jquery获取select标签中选中的option值及文本的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
jQuery实现动态操作table行
Nov 23 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 #jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 #jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 #jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 #jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 #jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 #jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 #jQuery
You might like
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
PHP学习之PHP运算符
2006/10/09 PHP
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
nginx 设置多个站跨域
2021/03/09 Servers
js中将字符串转换成json的三种方式
2011/01/12 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
js实现批量删除功能
2020/08/27 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
python使用marshal模块序列化实例
2014/09/25 Python
在Python中使用列表生成式的教程
2015/04/27 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
Python标准库shutil用法实例详解
2018/08/13 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
python操作gitlab API过程解析
2019/12/27 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
老师对学生的寄语
2014/04/09 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
详解Python中*args和**kwargs的使用
2022/04/07 Python