jQuery:取消选择select元素中的选项

jQuery: unselect option in select element

本文关键字：选项 元素 select 取消 选择 jQuery      更新时间：2023-09-26

我遇到了select元素的一个奇怪行为。因此，我有一个带有多个选项的select元素。其中一个选项为空-插件需要它来输出占位符。

我需要清除所选选项的功能，我写了这样的东西：

$(element).val('');
$(element).find("option:selected").removeAttr("selected");

问题是"selected"属性仍然在这里，它在旧选项上——您可以在代码示例中看到它。

所以，我有两个问题：

1( 为什么jQuery库的.val((方法不更新选项列表中的"selected"属性？

2( 为什么我不能在我的情况下更新"选定"属性？如果我切换这些语句，它就起作用了：

$(element).find("option:selected").removeAttr("selected");
$(element).val('');

代码示例：

$(function(){
  $("#unselect").click(function(){
    
    $("#lang_type").val('');
    $("#lang_type").find("option:selected").removeAttr("selected");
    alert($("#lang_type").html());
    
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="lang_type">
<option value=""></option>
<option value="01">01 - Language of text</option>
<option value="02">02 - Original language of a translated text</option>
<option selected="selected" value="03">03 - Language of abstracts</option>
<option value="04">04 - Rights language</option>
<option value="05">05 - Rights-excluded language</option>
<option value="06">06 - Original language in a multilingual edition</option>
<option value="07">07 - Translated language in a multilingual edition</option>
<option value="08">08 - Language of audio track</option>
<option value="09">09 - Language of subtitles</option>
</select>
<button id="unselect">Unselect</button>

编辑：你可以像这个一样使用prop(false)属性

$(function(){
  $("#unselect").click(function(){    
    $("#lang_type").val('');
    $("#lang_type").find("option:selected").prop('selected',false);
  });
});

正如@yezzz所说，请阅读以下内容：
注意：不要使用removeProp((方法删除本机属性，如checked、disabled或selected。这将完全删除该属性，一旦删除，就不能再添加到元素中。请使用.pr((将这些属性设置为false

如果我没有错的话，多选最初可以取消选择，但一旦选择了任何选项，就不能再取消选择了。RFC 1866在第8.1.3节中规定：

初始状态会选择第一个选项，除非任何元素上都存在selected属性。

这让我相信，必须始终选择一个选项。显然，不同的浏览器对此有不同的解释。。。

但这似乎不是jQuery的问题，而是浏览器实现的问题。

selected属性仅反映选择输入的初始状态。你不应该真的关心删除它，因为一旦选择了不同的选项(无论是用户还是页面上的脚本(，它都不会产生任何影响。

输入的当前状态可以通过selectedIndex属性读取或修改，其中-1的值意味着没有选择任何选项(这从来都不是默认值，因为最初总是选择一个选项(。但是，您似乎想要选择一个特定的"空"选项。在选择框上设置值会导致选择相应的选项，在您的情况下，这是第一个选项。

代码可能正是您想要的。因此，不要介意检查HTML，因为selected属性与输入的当前状态无关。

但是，:selected选择器与当前所选的元素相匹配。您的第一个代码段选择了一个选项，从而使其成为:selected，然后尝试从中删除一个不存在的属性。您的第二个代码段假设该选择保留在最初选择的选项上，然后从中删除该属性。接下来是"空"选项被选中，无需采取更多步骤，因为这就是选择选项所需的全部内容。

总之：您可以安全地删除所有涉及删除selected属性的代码，因为它不会影响元素的当前状态，该状态已经绑定到正确的选项。

相关文章：