用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插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 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
php中大括号作用介绍
2012/03/22 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
php ci框架验证码实例分析
2013/06/26 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
php封装的page分页类完整实例
2016/10/18 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
python绘制分布折线图的示例
2020/09/24 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
Pycharm安装python库的方法
2020/11/24 Python
用 python 进行微信好友信息分析
2020/11/28 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
中文系学生自荐信范文
2013/11/13 职场文书
颁奖典礼主持词
2014/03/25 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
售后服务质量承诺书
2015/04/29 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
Python一些基本的图像操作和处理总结
2021/06/23 Python