9

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>

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());
});

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

enter image description here

Thanks in advance

4
  • 5
    $(".car option:selected").prop('selected' , false) Commented Aug 31, 2016 at 9:39
  • Also note you can make the array of values using map() much more simply: var countries = $(".car option:selected").map(function() { return this.value; }).get(); Commented Aug 31, 2016 at 9:40
  • Possible duplicate of How to set the first option on a select box using jQuery? Commented Aug 31, 2016 at 9:45
  • Under what event do you want to unselect the options? It's not clear what you're trying to do here Commented Aug 31, 2016 at 9:46

3 Answers 3

12

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

0
4

You can use $('.car').val([]); for unselect all options in multi-select dropdown.

For multi select value you can pass empty array for unselect all options.

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

0

If You using select2 use trigger

 $("#category_select option:selected").prop("selected", false);
     $("#category_select").trigger('change');
1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Jun 29, 2023 at 12:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.