CODEWITHSUNDEEP
javascriptjquery
user1834664
user1834664

Reputation: 451

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

Upvotes: 2

Views: 11030

Answers (5)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

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

Upvotes: 15

SG001
SG001

Reputation: 1

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

Upvotes: -1

Jevgeni
Jevgeni

Reputation: 2574

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

Upvotes: 3

Amin Jafari
Amin Jafari

Reputation: 7207

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!

Upvotes: 1

Scimonster
Scimonster

Reputation: 33409

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>

Upvotes: 0

Related Questions