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

jQuery remove options from select

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

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

jQuery remove options from select

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

• javascript
• jquery

• instead of prepend use html then in click of removeskill call click event of addskills – guradio Commented Jun 23, 2017 at 8:40

6 Answers 6

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/

You can clear the value of the select list like this

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

set selectedIndex property into -1.

example: Pure Javascript

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

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

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

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

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

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