Clever Geek Handbook

5 select fields, hide values ​​for each selected item

I have select boxes, I would like to hide (remove) items from already selected options:

<select name="gets" class="gets">
<option value="0">SELECT</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<select name="gets" class="gets">
<option value="0">SELECT</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<select name="gets" class="gets">
<option value="0">SELECT</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<select name="gets" class="gets">
<option value="0">SELECT</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

So if I selected option 1 from the first selection box it should disappear from the rest, if I select option 3 in the 4 selection box it should disappear from the rest

Thank you in advance

+3


source to share


3 answers


Say as below:

$('.gets').change(function(){
    var value = $(this).val();
    $('.gets').not(this).find('option[value="'+value+'"]').hide();
})

DEMO



If you want to exclude a parameter SELECT

, say as below

$('.gets').change(function(){
    var value = $(this).val();
    if(value!=0)
        $('.gets').not(this).find('option[value="'+value+'"]').hide();
})
+6


source


You will need to find all parameters with the same value elsewhere and hide them. I would use something like this:

var selects = $('select');
selects.bind('change', function(e) {
    var val = this.value;
    //show all options
    selects.find('option').show();
    selects.each(function() {
        if(!this.value) return;
        //hide the selected value in the other selects
        selects.find('option[value="' + this.value + '"]')
                .filter(':not(:checked)')
                .filter(':not([value="0"])')
                .hide();
    });    

});


Example

+4


source


You can try this:

$("select").on("change", function(){
    var selectVal = $(this).val();
    $("select").not($(this)).find("option[value="+ selectVal +"]").remove();   
});

violin

+3


source






More articles:


All Articles