Question

我想根据所选选项的值

取消选择多个选择中的所选选项

我已经尝试了

jQuery remove selected option from this 和

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

Answer 2

而不是$(this).removeAttr('selected');，请尝试使用false将其设置为.prop()。

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

Answer 3

您可以像这样清除选择列表的值

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

Answer 4

将selectedIndex属性设置为-1。

示例：纯Javascript

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

Answer 5

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

你需要使用

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

Answer 6

只需将所选索引设置为 -1（用于选择和多选）

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

如何使用jQuery在多个选择中取消选择所选选项

6 个答案: