Disabling <select> option based on other <select> option

Question

How to disable multiple options in select, in case that exact options are selected in other selects. I found answered question for problem similar to mine on this link: http://jsfiddle.net/dZqEu/

jQuery code looks next:

$(this).siblings('select').children('option').each(function() {
    if ( $(this).val() === value ) {
        $(this).attr('disabled', true).siblings().removeAttr('disabled');   
    }

The problem is that this works only for 2 selects. I need total 3 selects which should disable possibility that same values in selects are selected.

This code won't work for 3 selects: http://jsfiddle.net/dZqEu/968/

Tnx in advance

NOTE:

When the select1 is set to 1, select 2 is set to 2, i can't disable values 1&2 in select3. It only disables value 2 in select 3...

Answer 1

try this:- http://jsfiddle.net/Z2yaG/

Using focus to get the prev value and remove disabled ones. In your html i have added value -1 for default option.

<option value="-1">No Match</option>

     var prev = -1;
$("select").change(function () {
    if ($(this).val() > -1) {
        $("select").not(this).find("option[value=" + $(this).val() + "]").attr('disabled', 'disabled');
    }
    $("select").not(this).find("option[value=" + previous + "]").removeAttr('disabled');
}).focus(function () {
    previous = $(this).val();
});

Answer 2

This seems to work: http://jsfiddle.net/QLn9b/1/

It is using your original code:

$("select").change(function() {   
    $("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
});