jquery 表单对象属性过滤器 :selected的空格问题

最新推荐文章于 2022-06-25 11:56:09 发布

weixin_33807284

最新推荐文章于 2022-06-25 11:56:09 发布

阅读量155

点赞数

文章标签： javascript java python ViewUI

原文链接：https://my.oschina.net/u/2430057/blog/613106

版权

2019独角兽企业重金招聘Python工程师标准>>>

当使用jquery表单属性选择器选择所有selected元素时，如$("select:selected"),这一表达式是无效的，因为真正被选择的是<select>下的<option>元素，这时想定位selected的option元素，可写成$("option:selected")或$("select :selected")即select后：前加一空格。

源码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="jquery/jquery-2.2.0.min.js"></script>

<script type="text/javascript">
	$(function() {
		$("select").change(function() {
			var str = "";
			// $("select option:selected").each(function() {
			// $("option:selected").each(function() {
			$("select :selected").each(function() {
			//如果写成option的父元素select，则要加个空格，即select :selected
				str += $(this).text();

			});
			$("div:last").html(str);
		});
		$("checkbox").change(function() {
			var str = "";
			// 			$("select option:selected").each(function() {
			// 			$("option:selected").each(function() {
			$("input :selected").each(function() {
			//如果写成真正选择的option的父元素select，则要加个空格，即select :selected
				str += $(this).text();

			});
			$("div:last").html(str);
		});

	});
</script>
</head>

<body>
	<form id="form">
		beijing:<input type="checkbox" value="beijing" />
		shanghai:<input type="checkbox" value="shanghai"/>
		guangzhou:<input type="checkbox" value="guangzhou"/><br>
		<select>
			<option disabled selected>请选择一个城市</option>
			<option>北京</option>
			<option>上海</option>
			<option>广州</option>
			<option>杭州</option>
		</select>
		
		<div id="one" style="width:100px;height:150px;border:solid red;">
			<div>div one</div>
			<div>div two</div>
			<div>div three</div>
			<div>div four</div>
		</div>
		<div id="two">div id two</div>
		<div id="three"></div>
		<div style="width:50px;height:20px;border:solid green"></div>
	</form>
</body>
</html>

转载于:https://my.oschina.net/u/2430057/blog/613106