使用 jquery 取消隐藏或返回多选时的选定选项答案

【问题标题】：Unhide or return selected options on multiple select using jquery使用 jquery 取消隐藏或返回多选时的选定选项
【发布时间】：2013-12-06 05:31:03
【问题描述】：

伙计们，我正在创建一个代码，该代码将在选择后删除另一个下拉列表中的选定选项，我使用了 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();   
});


});//]]>

【问题讨论】：

不要删除它们，而是使用display:none对用户隐藏它们，并有一个刷新按钮来display:block所有隐藏的项目。
刷新按钮将是一个问题，因为他们想立即显示数据。是否可以在不刷新的情况下显示值？
否则你怎么知道用户会改变主意？
jsfiddle.net/p9cpS/27
@KawineshSK 你不能在 IE 中隐藏选项，不支持

标签： javascript jquery select option multiple-instances

【解决方案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

【讨论】：

【解决方案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

【讨论】：

感谢您的帮助，但它不起作用，问题是当用户在第一次选择时选择选项 1，然后在第二次选择时选择选项 2，在第三次选择时选择选项 3，但他们突然改变主意并在第二次选择时选择 1，在第一次选择时选择 2，我的问题是我需要在第三次选择中显示剩余选择，以防他们将第一次选择更改为 3。