用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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jquery replace方法去空格
May 08 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery实现鼠标滑动切换图片
May 27 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
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
PHP实现MySQL更新记录的代码
2008/06/07 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
php实现加减法验证码代码
2014/02/14 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
关于js数组去重的问题小结
2014/01/24 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
python迭代器的使用方法实例
2013/11/21 Python
python对url格式解析的方法
2015/05/13 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
Python实战购物车项目的实现参考
2019/02/20 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
社团文化节邀请函
2014/01/10 职场文书
幼儿园秋游感想
2014/03/12 职场文书
锦旗标语大全
2014/06/23 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android