如何使用jquery取消选择选择中的选项 [英] How to unselect options in select using jquery

问题描述

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

Below is my HTML. I have given multiple option elements in the select tag.

<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 检索选定的值

I am able to multi-select by holding the CTRL key. I am able to retrieve the selected values using the following jQuery

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

如何使用 jQuery 取消选择值?所选值将突出显示，如下所示:

How can I unselect the value using jQuery? The selected value will be highlighted as shown:

提前致谢

推荐答案

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

Set the selected property to false: $(selector).prop('selected', false).

为了演示，我添加了一个按钮并附加了一个点击事件.

I have added a button and attached a click event to be able to demonstrate.

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

这篇关于如何使用jquery取消选择选择中的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！