如何从选择框中删除选项

Question

我想要做的是，无论“# #studentadd”选择框中显示了什么选项，我都希望能够从学生选择框中删除所有匹配的选项，并清空学生选择框。但目前它并没有这么做。

我做错了什么？

下面是两个选择框的html：

下面是选择框#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>

下面是学生应该附加到的选择框：

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

下面是jquery：

$('#studentadd option').attr('selected', 'selected');

var selectedOption = $('select#studentadd');
$('select#studentselect').remove(selectedOption.html());

Answer 1

试一试

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

Answer 2

如果两个列表中有相同的数据，它将尝试依赖于value属性：

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

// Update:处理多个元素的选择

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

将其付诸实践：http://jsfiddle.net/EvpDx/2/

Answer 3

如果要从SELECT中删除选定的项目(无论是- multiselect还是sinlge)，您可以使用：

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