如何使用jquery取消选择中的选项答案

【问题标题】：How to unselect options in select using jquery如何使用jquery取消选择中的选项
【发布时间】：2016-08-31 09:37:40
【问题描述】：

下面是我的 HTML。我在select 标签中给出了多个option 元素。

<select class="car" multiple size="3">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

我可以通过按住 CTRL 键进行多选。我可以使用以下 jQuery 检索选定的值

$.each($(".car option:selected"), function() {
    countries.push($(this).val());
});

如何使用 jQuery 取消选择值？选定的值将突出显示，如下所示：

提前致谢

【问题讨论】：

$(".car option:selected").prop('selected' , false)
还请注意，您可以使用map() 更简单地创建值数组：var countries = $(".car option:selected").map(function() { return this.value; }).get();
How to set the first option on a select box using jQuery?的可能重复
您要在什么情况下取消选择选项？目前尚不清楚您要在这里做什么

标签： javascript jquery html

【解决方案1】：

您可以使用$('.car').val([]); 取消选择多选下拉菜单中的所有选项。

对于多选值，您可以传递空数组以取消全选选项。

$(document).ready(function(){
  $("#select").click(function(){
    var values= [];
    $(".car > option").each(function(){
    	values.push($(this).attr('value'));
    });
    $('.car').val(values);
  });
  
  $("#unselect").click(function(){
    $('.car').val([]);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 <select class="car" multiple size="3">
  <option value="volvo" selected>Volvo</option>
  <option value="saab" selected>Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
  </select>
  <button id="select">Select All</button>
  <button id="unselect">Unselect All</button>
  </button>

【讨论】：

【解决方案2】：

将selected 属性设置为false：$(selector).prop('selected', false)。

我添加了一个按钮并附加了一个点击事件以便能够演示。

var countries = [];

function unselect() {
    $.each($(".car option:selected"), function () {
        countries.push($(this).val());
        $(this).prop('selected', false); // <-- HERE
    });
}

$("#unselect").click(unselect);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="car" multiple size="3">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

<input type="button" value="unselect" id="unselect" />

【讨论】：