如何使用jQuery在多选中取消选择选定的选项

Question

我想根据所选选项的值在多选中取消选择所选选项

我已经试过了

jQuery 从中删除选定的选项 和

jQuery 从选择中删除选项

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

请看小提琴https://jsfiddle.net/sxf6v3mt/2/

Answer 1

您可以使用 $("select option[value='"+id+"']").prop("selected", false);

它将取消选择其值设置为 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
           }
        });
});

试试：https : //jsfiddle.net/p1Lu83a2/