Remove selected option from another select box

Question

I am trying implement multiple select boxes in a single page. All these select boxes will have the same option values. When I select first option from select box 1, then that option should be removed from remaining select boxes.

<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 select box, but for multi select box, I am stuck.

Answer 1

Try this : Instead of removing option s 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

Answer 2

I recommend using jquery, code would look like this:

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

JSFiddle

UPDATE (inspired by Bhushan Kawadkar's answer)

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

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

Answer 4

here you go: 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!

Answer 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();
  });
});