Remove option in select

<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.net/9N9Tz/1/

Answers:

Answer

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

Answer

Here you go http://jsfiddle.net/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()
    }
})
Answer
// 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

Answer

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 commentators and Alex for bringing it to notice ]

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.