Here's a solution that first stores a copy of the <option>
html. On change of a <selecct>
it creates an array of all the selected values . It then rebuilds all the other ones from the stored html and filters the values allowed.
$(function () {
var $quest = $('.question_order');
/* cache option html */
var optHtml = $quest.first().html();
$quest.on('change', function () {
/* make array of all selected values*/
var selecteds=$quest.find('option:selected').map(function(){
if(this.value){
return this.value
}
}).get();
/* rebuild the other select elements*/
$quest.not(this).each(function(){
var selVal=this.value || '';
/* create new set of options with filtered values*/
var $opts=$(optHtml).filter(function(){
return $.inArray(this.value,selecteds) ==-1 || this.value ==selVal
});
/* replace children*/
$(this).html($opts).val(selVal);
});
});
});
Note that class="question_order"
added to each element.