javascript - jQuery:取消选择元素中的选项

标签 javascript jquery select

我遇到了选择元素的奇怪行为。所以,我有一个带有多个选项的选择元素。选项之一为空 - 插件需要它来输出占位符。

我需要可以清除所选选项的功能,我写了如下内容:

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

问题是“selected”属性仍然在这里并且是旧选项 - 您可以在代码示例中看到它。

所以,我有两个问题:

1) 为什么 jQuery 库的 .val() 方法不更新选项列表中的“selected”属性?

2) 为什么我无法更新我的案例中的“selected”属性?如果我切换这些语句,它就会起作用:

$(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) 属性,例如 this

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

就像@yezzz所说,阅读以下内容:
注意:不要使用removeProp()方法删除原生属性,例如checked、disabled或selected。这将完全删除该属性,并且一旦删除,就无法再次添加到元素中。使用 .prop() 将这些属性设置为 false。

关于javascript - jQuery:取消选择元素中的选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35901793/

相关文章:

jquery - 可写选择框

javascript - Jquery Ajax 验证复选框

javascript - findAll 事件在 ember-data 中返回奇怪的类

javascript - D3JS : Animate a 2 arc donut

javascript - 了解 jQuery 的 jqXHR

jquery - 解析从ajax传递到 "dd/MM/yyyy"的日期时间格式

javascript - UIWebview 不会通过基本身份验证加载动态加载的资源(通过 jQuery Mobile)

python - clickhouse + sqlalchemy : SELECT drops two rows from result

mysql - 如何检查日期范围是否存在

连接数据的 MySQL 条件