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

在前端编写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中去。

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

masked_fill【将mask中值为True的位置对应的待填充的张量设置为value值】
masked_fill方法有两个参数,maske和value,mask是一个pytorch张量(Tensor),元素是布尔值,value是要填充的值,填充规则是mask中取值为True位置对应于待填充 ...
怎么隐藏Windows11开始菜单中的推荐面板
相信现在很多用户都在使用Win11操作系统,在"开始"菜单的下半部分包含了"推荐"面板.目前它用于突出显示最近使用的文件和最近安装的应用程序,但有些人担心Mic ...
Android隐藏EditText长按菜单中分享功能探索
常见的EditText长按菜单如下 oppo 小米需求是隐藏掉其中的分享/搜索功能,禁止将内容分享到其他应用. 最终解决方案这里先说下最终解决方案像华为/oppo等手机,该菜单实际是谷歌系统的即 ...
子窗体列表在菜单中的实现
想在菜单中加入子窗体的列表,上网找了半天,都很麻烦,后来看看了菜单的属性,发现里面有个MdiList属性,设置成true,搞定,晕. 转载于:https://www.cnblogs.com/catzh ...
回发或回调参数无效。在配置中使用 enableEventValidation=true或在页面中启用了事件验证...(转)...
原文:http://blog.csdn.net/zhangyj_315/archive/2009/03/03/3952313.aspx 回发或回调参数无效.在配置中使用 <pages enabl ...
Android记录23-关于actionbar中overflow menu(溢出菜单)中的一些问题
Android记录23-关于actionbar中overflow menu(溢出菜单)中的一些问题前言本篇博客记录一下小巫在使用actionbar的时候遇到关于溢出菜单的一些问题: 什么是Over ...
下拉菜单中自动亮度调节P 上背光调节
P 上背光调节: https://blog.csdn.net/FightFightFight/article/details/85797336 frameworks\base\packages\Sys ...
如何在桌面或者开始菜单中创建快捷方式
//在桌面或者开始菜单中创建快捷方式 //pazSrcPath:源文件路径 //bDesktop:标志位,用来判断是否在桌面上创建快捷方式,真,在桌面上创建,否则在开始菜单中创建 bool creat ...
mac 打开记事本快捷键_如何在所有文件的Windows快捷菜单中添加“使用记事本打开”...
mac 打开记事本快捷键 If you want to open a file type not registered with Notepad, you have to click through ...
excel下拉菜单vba_在Excel下拉菜单中显示警告
excel下拉菜单vba With Excel's data validation, you can show a drop down list of items in a cell. You can ...

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

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

最新文章

热门文章