用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实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery实现简单评论功能
Aug 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
3
2006/10/09 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
解密效果
2006/06/23 Javascript
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
python实现批量转换图片为黑白
2020/06/16 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
Java文件和目录(IO)操作
2014/08/26 面试题
开办加工厂创业计划书
2014/01/03 职场文书
简短证婚人证婚词
2014/01/09 职场文书
村庄绿化方案
2014/05/07 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
子女赡养老人协议书
2016/03/23 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP