How to deselect the selected option in multiple select using jQuery

Question

I want to deselect the selected option in multiple select based on the selected option's value

I have already tried

jQuery remove selected option from this and

<select size="5" id="skills"  multiple>
  <option value="0">Choose - Skills</option>
  <option value="19">Analytics</option>
  <option value="20">Android</option>
</select>

<input type="button" id="addskills" value="Add">


<div class="skill-text">
</div>

<script>
$(function(){
    $('#addskills').on('click', function(){
        $('#skills :selected').each(function(i, selected){
            var text = $(this).text();
            var value = $(this).val();
            $('.skill-text').prepend("<span class='removeskill' data-id='"+value+"'>"+text+"<i class='fa fa-times' ></i></span>");
        });     
    });

    $('body').on('click',".removeskill", function(){
        var id = $(this).data("id");
        //$('body').find("#skills option[value="+id+"]").removeAttr("selected");
        //$('#skills :selected').find("option[value="+id+"]").removeAttr("selected");
        $('#skills :selected').each(function(i, selected){
            if($(this).val() == id){
               alert('inside if');
               $(this).removeAttr('selected');
            }
        });
    });
})
</script>

please see the fiddle https://jsfiddle.net/sxf6v3mt/2/

instead of prepend use html then in click of `removeskill` call click event of `addskills` — guradio, Jun 23 '17 at 08:40

score 8 · Accepted Answer · answered Jun 23 '17 at 08:45

You can use $("select option[value='"+id+"']").prop("selected", false);

It will deselect option which has value set as id

$('body').on('click',".removeskill", function(){
        var id = $(this).data("id");
        $(this).remove(); // to remove that item from list
        $('#skills :selected').each(function(i, selected){
           if($(this).val() == id){
             $("select option[value='"+id+"']").prop("selected", false); // to deselect that option from selectbox
           }
        });
});

Try: https://jsfiddle.net/p1Lu83a2/

score 2 · Answer 2 · answered Jun 23 '17 at 08:42

2

You can clear the value of the select list like this

$('#skills').val('');

answered Jun 23 '17 at 08:42

Stavros Angelis

962
5
8

score 2 · Answer 3 · edited Jun 23 '17 at 08:58

2

set selectedIndex property into -1.

example: Pure Javascript

var a = document.getElementById('skills');
a.selectedIndex = -1;

edited Jun 23 '17 at 08:58

31piy

23,323
6
47
67

answered Jun 23 '17 at 08:48

Sethumadhavan K

83
6

score 1 · Answer 4 · answered Jun 23 '17 at 08:41

1

Instead of $(this).removeAttr('selected');, try setting it to false using .prop().

$(this).prop('selected', false);

answered Jun 23 '17 at 08:41

31piy

23,323
6
47
67

Mahmoud · Answer 5 · 2017-06-23T08:55:34.313

try $('#skills option').prop("selected", false);

you juste need to use

$('#addskills').on('click', function(){
    $('#skills :selected').each(function(i, selected){
        var text = $(this).text();
        var value = $(this).val();
        $('.skill-text').prepend("<span class='removeskill' data-id='"+value+"'>"+text+"<i class='fa fa-times' ></i></span>");  
    });   
    $('#skills option').prop("selected", false);  
});

score 0 · Answer 6 · answered Aug 02 '21 at 12:59

0

Just set the selected index to -1 (for select and multi select)

$("#skills").prop('selectedIndex',-1);

answered Aug 02 '21 at 12:59

FdelS

90
1
5

How to deselect the selected option in multiple select using jQuery

6 Answers6