Показывать или отображать выбранные параметры при множественном выборе с помощью jquery

Question

Ребята Я создаю код, который удалит выбранную опцию в другом выпадающем списке, выбранном, я использовал jQuery (jquery-1.10.1.min), но я не знайте, как я смогу вернуть выбранный вариант или номер, как только пользователь передумает.

Не могли бы вы помочь мне? Заранее спасибо.

Вот мой сценарий:

HTML

<select name="question_order[]" id="question_order1"> 
<option value="">None</option> 
<option value="01">01</option> 
<option value="02">02</option> 
<option value="03">03</option> 
<option value="04">04</option> 
</select> 

<select name="question_order[]" id="question_order2"> 
<option value="">None</option> 
<option value="01">01</option> 
<option value="02">02</option> 
<option value="03">03</option> 
<option value="04">04</option> 
</select> 

<select name="question_order[]" id="question_order3"> 
<option value="">None</option> 
<option value="01">01</option> 
<option value="02">02</option> 
<option value="03">03</option> 
<option value="04">04</option> 
</select> 

<select name="question_order[]" id="question_order4"> 
<option value="">None</option> 
<option value="01">01</option> 
<option value="02">02</option> 
<option value="03">03</option> 
<option value="04">04</option> 
</select> 

Javascript

$(window).load(function(){ 
$('#question_order1').on('change', function() { 
    var val=this.value; 
    $("#question_order2").find("option:contains("+val+")").remove();  
    $("#question_order3").find("option:contains("+val+")").remove(); 
    $("#question_order4").find("option:contains("+val+")").remove(); 

}); 

$('#question_order2').on('change', function() { 
    var val=this.value; 
    $("#question_order1").find("option:contains("+val+")").remove(); 
    $("#question_order3").find("option:contains("+val+")").remove(); 
    $("#question_order4").find("option:contains("+val+")").remove(); 

}); 

$('#question_order3').on('change', function() { 
    var val=this.value; 
    $("#question_order1").find("option:contains("+val+")").remove(); 
    $("#question_order2").find("option:contains("+val+")").remove();  
    $("#question_order4").find("option:contains("+val+")").remove(); 
}); 


$('#question_order4').on('change', function() { 
    var val=this.value; 
    $("#question_order1").find("option:contains("+val+")").remove(); 
    $("#question_order2").find("option:contains("+val+")").remove();  
    $("#question_order3").find("option:contains("+val+")").remove(); 
}); 


});//]]> 

Answer 1

Вот решение, в котором сначала хранится копия <option> html. При изменении <selecct> он создает массив всех выбранных значений. Затем он восстанавливает все остальные из сохраненного html и фильтрует допустимые значения.

$(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); 

     }); 
    }); 

}); 

Отметьте, что class="question_order" добавлен к каждому элементу.

DEMO

Answer 2

Попробуйте

<select name="question_order[]" id="question_order1" > 
<option value="">None</option> 
<option value="01">01</option> 
<option value="02">02</option> 
<option value="03">03</option> 
<option value="04">04</option> 
</select> 

<select name="question_order[]" id="question_order2" > 
<option value="">None</option> 
<option value="01">01</option> 
<option value="02">02</option> 
<option value="03">03</option> 
<option value="04">04</option> 
</select> 

<select name="question_order[]" id="question_order3" > 
<option value="">None</option> 
<option value="01">01</option> 
<option value="02">02</option> 
<option value="03">03</option> 
<option value="04">04</option> 
</select> 

<select name="question_order[]" id="question_order4" > 
<option value="">None</option> 
<option value="01">01</option> 
<option value="02">02</option> 
<option value="03">03</option> 
<option value="04">04</option> 
</select> 

Demo