HTML菜单中有关selected=true和setAttribute(“selected“,“selected“)的异同以及selected设置无法生效的问题解析

ardentrain

于 2021-09-03 10:03:58 发布

阅读量2.2k

点赞数 1

文章标签： html html5 javascript

本文链接：https://blog.csdn.net/ardentrain/article/details/120073243

版权

在前端编写select功能的时候，遇到了设置下拉首选默认项selected无效的问题，百度上有说用autocomplete="off"来解决的，实际上完全是错误的，即便在某些情况下有效果了，也可能是碰巧其它因素导致了生效而已。

首先上代码：

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script>
function testSelect()
{
	var options=document.getElementById("select_test").options;
	options[6].setAttribute("selected","selected");
}
</script>
</head>
<body>
<select id="select_test">
	<option value="a">a</option>
	<option value="b" selected="selected">b</option>
	<option value="c">c</option>
	<option value="d" selected="selected">d</option>
	<option value="e">e</option>
	<option value="f" selected="selected">f</option>
	<option value="g">g</option>
</select>
<input type="button" onclick="testSelect()" value="点击查看效果"/>
</body>
</html>

【规则1】：
某个option在HTML源码中被“唯一”设定为selected="selected"的情况，前端选中项必定是这个option；

【规则2】：
多个option都设定了selected="selected"的情况下，前端选中项是option列表中的最后一个被设定为selected的项；

【规则3】：
添加以下js代码到testSelect()，用来选中value="g"的那一项option：
options[6].setAttribute(“selected”,“selected”)
g可以被成功选中，原因是options[6]原来没有selected属性，新添加会导致浏览器选中该项；

【规则4】：
如果使用setAttribute设定一个已经有了selected属性的option会怎样呢？例如我们设定value="b"这一项：
options[1].setAttribute(“selected”,“selected”)
结果b没有被选中，因为b已经有了selected属性，浏览器会忽略这一步重复操作，通俗讲就是：你(ya)的之前有selected都无效，再重复设置selected也是设了个寂寞；

【规则5】：
如果使用removeAttribute删除最初被选中的f会怎样？选中项会顺次变为d吗？
options[5].removeAttribute(“selected”);
结果并不是d，而是options的第一项a；说明删除选中项的selected的属性，并不会让浏览器重新选择其他有selected属性的option。而是默认选择option的第一项；道理和规则4一样：你(ya)的之前有selected的option都无效，这次也不行；

【规则6】：
如果使用removeAttribute删除的不是被选中的option会怎样呢？选中项会变为首项吗？
options[1].removeAttribute(“selected”);
答案是不会，依然是f，因为原来的选中项的selected属性并未被删除。

另外一个设定selected属性的方法是：dom.selected=true;因为该方法不会影响到html源码的内容，这也是导致很多人困惑的原因，明明看源码是某个option被selected，但是前端显示的却偏偏不是。

【规则7】：
使用selected=true是最直接最有效设置selected属性的方法，设置即生效。

可能有人会问了，如果这样，我们直接用selected=true就可以了，完全可以摒弃复杂易错的setAttribute了吗？其实不是的，selected=true不会影响到源码的内容，这会导致在需要复制某个dom的时候，无法完全一致地完成复制，因为selected=true的设定是不体现在源码中的，此时，一定需要用setAttribute和removeAttribute配合使用，以便让正确的选中项复制到新的dom中去。