javascript - 从另一个选择框中删除选定的选项

Question

我正在尝试在单个页面中实现多个选择框。所有这些选择框都将具有相同的选项值。当我从选择框 1 中选择第一个选项时，该选项应从其余选择框中删除。

<select name="selectBox1" id="selectBox1">
   <option value="option1">option1</option>
   <option value="option2">option2</option>
   <option value="option3">option3</option>
   <option value="option4">option4</option> 
</select>

<select name="selectBox2" id="selectBox2">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>    
</select>

<select name="selectBox3" id="selectBox3">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>    
</select>

我该怎么做？如果只有一个选择框，我知道如何删除或添加选项，但对于多选框，我陷入困境。

Answer 1

试试这个:您可以显示/隐藏它，而不是从列表中删除选项，这样，如果用户更改选定的选项，则相同的选项 应该在其余的选择框中恢复。

$(document).ready(function(){
   $('select').on('change', function(event ) {
       //restore previously selected value
       var prevValue = $(this).data('previous');
       $('select').not(this).find('option[value="'+prevValue+'"]').show();
       //hide option selected                
       var value = $(this).val();
       //update previously selected data
       $(this).data('previous',value);
       $('select').not(this).find('option[value="'+value+'"]').hide();
   });
});

<强> DEMO