用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实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
使用jquery实现轮播图效果
Jan 02 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
Jquery Ajax请求代码(2)
2011/01/07 Javascript
Seajs的学习笔记
2014/03/04 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
python 实现归并排序算法
2012/06/05 Python
wxPython中listbox用法实例详解
2015/06/01 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
企业整改报告范文
2014/11/08 职场文书
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
Elasticsearch 基本查询和组合查询
2022/04/19 Python
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL