Javascriptで次のドロップダウンで選択した値を無効にする方法

Question

function preventDupes(select, index) { 
    var options = select.options, 
     len = options.length; 
    while(len--) { 
     options[ len ].disabled = false; 
    } 
    select.options[ index ].disabled = true; 
     if(index === select.selectedIndex) { 
     alert('You\'ve already selected the item "' + select.options[index].text + '".\n\nPlease choose another.'); 
     this.selectedIndex = 0; 
    } 

} 

var select1 = select = document.getElementById('select1'); 
var select2 = select = document.getElementById('select2'); 
var select3 = select = document.getElementById('select3'); 
var select4 = select = document.getElementById('select4'); 
var select5 = select = document.getElementById('select5'); 

select1.onchange = function() { 
    preventDupes.call(this, select2, this.selectedIndex); 
     preventDupes.call(this, select3, this.selectedIndex); 
     preventDupes.call(this, select4, this.selectedIndex); 
     preventDupes.call(this, select5, this.selectedIndex); 
}; 

select2.onchange = function() { 
    preventDupes.call(this, select1, this.selectedIndex); 
     preventDupes.call(this, select3, this.selectedIndex); 
     preventDupes.call(this, select4, this.selectedIndex); 
     preventDupes.call(this, select5, this.selectedIndex); 
}; 

select3.onchange = function() { 
    preventDupes.call(this, select1, this.selectedIndex); 
     preventDupes.call(this, select2, this.selectedIndex); 
     preventDupes.call(this, select4, this.selectedIndex); 
     preventDupes.call(this, select5, this.selectedIndex); 
}; 

select4.onchange = function() { 
    preventDupes.call(this, select1, this.selectedIndex); 
     preventDupes.call(this, select2, this.selectedIndex); 
     preventDupes.call(this, select3, this.selectedIndex); 
     preventDupes.call(this, select5, this.selectedIndex); 
}; 

select5.onchange = function() { 
    preventDupes.call(this, select1, this.selectedIndex); 
     preventDupes.call(this, select2, this.selectedIndex); 
     preventDupes.call(this, select3, this.selectedIndex); 
     preventDupes.call(this, select4, this.selectedIndex); 
}; 

私はすでに選択されているドロップダウンフィールドを無効にしようとしていますが、最後に選択したドロップダウン値を無効にします。

ユーザーが最初に課金を選択すると、他の4つのドロップダウンで無効にする必要があります。ユーザーが生物学を選択すると、他の3つのドロップダウンで生物学と会計を無効にする必要があります。したがって、ユーザーは上位5つの選択肢を設定することができます

Answer 1

実際のコードを見たい場合はprepared a fiddleです。

これは、質問のonchangeハンドラからの重複を大幅に削減します。

var selects = '#first, #second'; 

1）選択された永続化：1つのコードを繰り返す必要がないように

0）jQueryのセレクタを定義：

は読みやすくするために、私は複数の部分にコードを分割しています配列内の値：

var selectedValues = []; 

2）更新選択された値：

var updateSelected = function() { 
    selectedValues = []; 
    jQuery(selects).each(function() { 
    selectedValues.push(jQuery(this).val()); 
    }); 
} 

3）いずれかの選択項目ですでに選択されているオプションを無効にします。選択されたオプション自体は、ユーザにとって奇妙に見え、フォーム提出時にブラウザが値を送信しないため、無効になることはありません。

var disableOptions = function() { 
    jQuery(selects).each(function() { 
    var select = this; 
    $(this).children('option').each(function() { 
     if (selectedValues.indexOf($(this).val()) > -1 && $(select).val() != $(this).val()) { 
     $(this).attr('disabled', true); 
     } else { 
     $(this).removeAttr('disabled'); 
     } 
    }); 
    }); 
} 

4）のonchangeハンドラ

jQuery(selects).change(function(event) { 
    updateSelected(); 
    disableOptions(); 
});