使用prop和attr给option设置selected

最新推荐文章于 2024-05-21 21:13:29 发布

doshy_

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量1.2k

点赞数 2

分类专栏： jQuery 文章标签： jquery js dom css

本文链接：https://blog.csdn.net/PointerIsSoul/article/details/108763278

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		请输入你的爱好：
		<input type="text" />
		<button>确定</button>
		<select>
			<option value="乒乓球">乒乓球</option>
			<option value="足球">足球</option>
			<option value="篮球">篮球</option>
		</select>
	</body>
</html>
<script src="js/jquery-3.5.1.js" charset="utf-8"></script>
<script>
	$(function(){
		$("button").click(function(){
			var hobby = $("input").val();
			
			//$("select").find("option[value="+hobby+"]").attr("selected",true).siblings("option").removeAttr("selected");
			
			$("select").find("option[value="+hobby+"]").attr("selected",true);
			
		})
	})
</script>

演示示例：
在这里插入图片描述

一。如果使用attr(),给option赋了selected=selected属性后要使用removeAttr()将相邻的option的selected属性给去掉。如下:
//$(“select”).find(“option[value=”+hobby+"]").attr(“selected”,true).siblings(“option”).removeAttr(“selected”);

二。使用prop()比attr()好。
$(“select”).find(“option[value=”+hobby+"]").attr(“selected”,true);

三。prop()和attr()的区别（）：

property：属性，attribute：特性。

property是DOM中的属性，是JavaScript里的对象；
attribute是HTML标签上的特性，它的值只能够是字符串；

prop是1.6.1才新出来的，attr()和prop()可以理解为获取/设置属性，即attributes和properties。window或document中使用attr()方法在jQuery1.6之前不能正常运行，因为window和document中不能有attributes。

attr()一般用于操作自定义属性，通过访问和操作 DOM 元素的属性节点来工作。

prop()获取在匹配的元素集中的第一个元素的属性值。在获取元素状态时返回布尔值，大大方便了对状态的判断。prop 一般用于操作 HTML 元素固有属性。如果元素上没有该属性，或者如果没有匹配的元素。那么该方法会返回undefined值。

doshy_

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用prop和attr给option设置selected

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> 请输入你的爱好： <input type="text" /> <button>确定</button> <select> <option value="乒乓
复制链接

扫一扫