Question

我遇到了select元素的奇怪行为。所以，我有一个带有几个选项的select元素。其中一个选项是空的 - 插件需要输出占位符。

我需要能够清除所选选项的功能，并且我写了类似的内容：

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

事情是＆＃34;选择＆＃34;属性仍然在这里，并且它在旧选项上 - 您可以在代码示例中看到它。

所以，我有两个问题：

1）为什么jQuery库的.val（）方法不会更新＆＃34;选择＆＃34;选项列表中的属性？

2）为什么我无法更新＆＃34;选择＆＃34;在我的情况下属性？如果我改变这些陈述，它就会起作用：

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

代码示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

修改您可以使用prop(false)

等$(function(){ $("#unselect").click(function(){ $("#lang_type").val(''); $("#lang_type").find("option:selected").prop('selected',false); }); });属性
/Count
像@yezzz说的那样，读到这个：
注意：请勿使用removeProp（）方法删除本机属性，例如已选中，已禁用或已选中。这将完全删除属性，一旦删除，就不能再次添加到元素。使用.prop（）将这些属性设置为false。

Answer 2

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

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

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

但它似乎不是一个jQuery问题，而是一个浏览器实现问题。

Answer 3

selected属性仅反映选择输入的初始状态。您不应该真正关心删除它，因为一旦选择了不同的选项（由用户或页面上的脚本），它不会影响任何内容。

可以通过selectedIndex属性读取或修改输入的当前状态，其中值-1表示未选择任何选项（这绝不是默认选项，因为始终有选项最初选择）。但是，您似乎想要选择特定的“空”选项。在选择框上设置值会导致选择相应的选项，在您的情况下，这是第一个选项。

代码可能完全符合您的要求。所以不要介意检查HTML，因为selected属性 - 再次 - 与输入的当前状态无关。

但是，:selected选择器与当前选中的元素相匹配。您的第一个代码段会选择一个选项，从而使其成为:selected，然后尝试从中删除不存在的属性。您的第二个片段假定选择保留在最初选择的选项上，然后从中删除该属性。接下来是选择“空”选项，不再需要采取任何步骤，因为选择选项只需要这样做。

总结一下：您可以安全地删除处理selected属性删除的所有代码，因为它不会影响元素的当前状态，状态已经与正确的选项相关联。

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

3 个答案: