用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 dataTable 获取某行数据
May 05 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 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
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
跟单文员岗位职责
2014/01/03 职场文书
亮化工程实施方案
2014/03/17 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
生日答谢词
2015/01/05 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers