<select class="one">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<br />
<select class="one">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<br />
<select class="one">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

$(".one").change(function(){

})

I would like make - for example if i select in first position option 1 then i others selects this option should be removed. So if i in first select i select 1 then in select second and third i have only option 2 and 3. If in second select i select 2 then in last select i have only option 3.

How can i make it? I would like use jQuery.

LIVE: /

<select class="one">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<br />
<select class="one">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<br />
<select class="one">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

$(".one").change(function(){

})

I would like make - for example if i select in first position option 1 then i others selects this option should be removed. So if i in first select i select 1 then in select second and third i have only option 2 and 3. If in second select i select 2 then in last select i have only option 3.

How can i make it? I would like use jQuery.

LIVE: http://jsfiddle/9N9Tz/1/

• javascript
• jquery
• html

• I have three position, i must order this, so if i selected one option then in others select this option should be removed - this option is in first select – Paul Jeggor Commented Jun 17, 2012 at 13:24
• 1 I don't think pulldowns are the best interface for this. Depending on how much work you are willing to do, why not put up little boxes labeled 1-2-3 and have the user drag them into the order she wants? – user663031 Commented Jun 17, 2012 at 13:28
• @gdoron - What, posting it as a question on SO doesn't count as effort? – Jared Farrish Commented Jun 17, 2012 at 13:35
• @JaredFarrish. Of course it does... +1. – gdoron Commented Jun 17, 2012 at 13:36

4 Answers 4

If you need to sort something, consider using something like jQuery UI sortable as a bunch of drop down menus make a really poor UX for that.

But to answer your question:

var $selects = $('.one');
$selects.on("keyup click change", function(e) {
  $selects.not(this).trigger('updateselection');
}).on("updateselection", function(e, data) {
  var $this = $(this);
  $this.children().show();
  $selects.not(this).each(function() {
    var value = $(this).val();
    if (value) {
      $this.children('[value="' + value + '"]').hide();
    }
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="one">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<br />
<select class="one">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<br />
<select class="one">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Hiding an option works in current firefox. I'm not sure about legacy browser. Hiding, but not removing, the element makes sure that you can change your selection without having crippled your input elements.

Here you go http://jsfiddle/Calou/9N9Tz/6/.

When the value of the <select>s changes, just take this value and search for the <option>s with this value in the others <select>s and remove them.

$(".one").change(function(){
    var val = this.value
    if (val !== '') {
        $(this).siblings().find('option[value=' + val + ']').remove()
    }
})

// As soon as all selects have one class, you'll have to distinguish them:
$(".one").each(function() { 
    // Now this corresponds to one select (in the loop over all)
    $(this).change(function() {
       // Fix what've done before
       $('option').show();
       // Find every other select, find an option in it
       // that has the same value that is selected in current select
       // (sorry for the description)
       $('.one').not(this).find('option[value=' + $(this).find('option:selected').val() +']').hide();
    });
})​;​

jsFiddle

It will be easy if you use different class for second and third select element

$(".one").change(function(){
    var val = parseInt($(this).val());
    $('.two,.three').find('option:contains('+val+')').remove();  
});  

EDIT:
Updated code to apply for multiple selects. [Thanks to all mentators and Alex for bringing it to notice ]

  $(".one").change(function(){
        var val = parseInt($(this).val());
        $(this).siblings().find('option:contains('+val+')').remove();  
    });