Remove Selected Option From Another Select Box

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 optio

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

Solution 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

Solution 3:

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

<selectname="selectBox1"id="selectBox1"multiple="multiple"><optionvalue="option1">option1</option><optionvalue="option2">option2</option><optionvalue="option3">option3</option><optionvalue="option4">option4</option></select>

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

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