Question

I have a page that shows 3 drop-down selectors on the page. I also have a jQuery code that checks to make sure that if one option is selected the same one is not allowed to be selected in the other 2 drop-downs.

I need to change the code not to only stop from allowing selecting a duplicate but to completely remove selected option from the other drop-downs below this one. I assume I would have to put all options into an array and somehow remove from the list when generating next drop-down.

Alternatively I need to mark already selected ones with a different color, with a class, perhaps.

Here’s my current code:

$('.mySelect').change(function(index, elem){
    var myFilter = $(this).val();
    if(myFilter !="selectOne"){
        var size = $('.qSelect').not(this).not(function(index){
        return $(this).val() != myFilter;
    }).size();
        if(size > 0){
            alert("already selected.");
        } else {
            // do something
        }   
    }   
});

<select name="select1" class="mySelect">
    <option value="selectOne">Select one</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<select name="select2" class="mySelect">
    <option value="selectOne">Select one</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>   

<select name="select3" class="mySelect">
    <option value="selectOne">Select one</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

Answer 1

Rather than creating an array and removing/re-inserting items, you could use proper form field behaviour and set the option to ‘disabled’. It can be confusing to users if you remove elements.

You could do this by going:

$('.mySelect').bind('change', function(el) {

    var _this = $(this),
        newVal = _this.val();
    $('select.mySelect:not([name=' + _this.attr('name') + ']) 
            option[value=' + _this.data('oldVal') + ']').attr('disabled', false);
    $('select.mySelect:not([name=' + _this.attr('name') + ']) 
            option[value=' + newVal + ']').attr('disabled', true);
    _this.data('oldVal', newVal);

});

(http://jsfiddle.net/KT856/)

You can change “.attr(‘disabled’, true)” to apply what ever treatment you decide.

Also – I assume you’re validating this on the server-side as well 😉

Edit: updated script so that it stores “previous selection” in order to reenable those options in the other selects if the selection changes.

NB: this approach will work no matter which order the user selects options.