如何从选择框中删除选项

时间:2013-01-12 23:12:33

标签: jquery html

我想要做的是在“#studentadd”选择框中显示哪些选项,我希望能够从#studentselect选择框中删除所有匹配选项以及清空{{ 1}}选择框。但目前它没有这样做。

我做错了什么?

下面是两个选择框的html:

以下是选择框#studentadd

#studentadd

以下是学生应加入的选择框:

<select multiple="multiple" name="addtextarea" id="studentadd" size="10">
    <option value='1'>u08743 - Joe Cann</option>
    <option value='4'>u03043 - Jill Sanderson</option>
    <option value='7'>u08343 - Craig Moon</option>
</select>

以下是jquery:

    <select id="studentselect" name="studenttextarea">
        <option value='1'>u08743 - Joe Cann</option>
        <option value='4'>u03043 - Jill Sanderson</option>
        <option value='7'>u08343 - Craig Moon</option>
</select>

3 个答案:

答案 0 :(得分:2)

尝试

var selectedOption = $('#studentadd').find(':selected');
var studentSelect = $('#studentselect');
selectedOption.each(function(){
    studentSelect.find('[value="'+this.value+'"]').remove();
});

DEMO

答案 1 :(得分:1)

如果两个列表中都有相同的数据,它会尝试依赖value属性:

$('#studentadd').change(function () {  
  var value = $(this).find("option:selected").val();
  $('#studentselect option[value="' + value + '"]').remove();
});

//更新:处理多个元素的选择

$('#studentadd').change(function () {
  $(this).find("option:selected").each(function () {
    $('#studentselect option[value="' + $(this).val() + '"]').remove();
  });
});

查看实际操作:http://jsfiddle.net/EvpDx/2/

答案 2 :(得分:0)

如果您想从SELECT中删除所选项目(无论是多选还是单项),您可以使用:

$('#studentadd option').attr('selected', 'selected');  //Preparation
$('#studentadd option:selected').remove()              //Choose all selected OPTIONs from item with ID=studentadd and remove it