从另一个选择框中删除所选选项

I am trying implement multiple select box in a single jsp. All this select box will have the same option value. When i select first option from selecct box 1, then that option should be removed from remaining select box,

我正在尝试在单个jsp中实现多个选择框。所有这个选择框将具有相同的选项值。当我从选择框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>

How do i do it, i know how to remove or add option if there is only one selecct box, but for multi select box, i am stuck. Please help.

我怎么做，我知道如果只有一个选择框如何删除或添加选项，但对于多选框，我卡住了。请帮忙。

5 个解决方案

#1

Try this : Instead of removing options from the list you can show / hide it, so that if user change selected option then same option should get restored in rest of the select boxes.

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

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

DEMO

#2

I recommend using jquery, code would look like this:

我建议使用jquery，代码看起来像这样：

$("select").change(function(e){
    var $s = $(e.target);
    $("select").not($s).find("option[value="+$s.val()+"]").remove();
});

JSFiddle

的jsfiddle

UPDATE (inspired by Bhushan Kawadkar's answer)

更新（灵感来自Bhushan Kawadkar的回答）

Here is how you can improve it:

以下是如何改进它：

$("select").change(function(e){
    $("select option").removeAttr('disabled');
    $("select").each(function(i,s){
       $("select").not(s).find("option[value="+$(s).val()+"]").attr('disabled','disabled');
    });
});

JSFiddle

的jsfiddle

#3

Instead of trying to hack your own multiple select box, how about just using a real multi-select box?

而不是试图破解你自己的多选框，如何使用真正的多选框？

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

#4

here you go: DEMO

你去吧：DEMO

$('select').on('change',function(){
    var value=$(this).val();
    $('select').not(this).each(function(){
        $(this).find('option[value='+value+']').remove();
    });
});

but keep in mind that this is not how you ask questions in SO, you need to try some code then show what you've tried and ask for help fixing the problem!

但请记住，这不是你在SO中提问的方式，你需要尝试一些代码，然后展示你尝试过的东西并寻求帮助解决问题！

#5

Try if the following code example could work for you:

尝试以下代码示例可以为您工作：

$(document).ready(function(){
  $('select').on('change', function(event ) {
    var value = $(this).val();
    $(this).prop('disabled', false);

    $('select').find('option[value="'+ value +'"]')
     .attr('disabled', 'disabled')
     .hide();
  });
});