删除一个下拉项目，如果它被选中

Question

我有一个窗体上的多个实例下拉选择，确切地说八个。如果我在第一个选择下拉列表中选择一个数字，我想从第二个选择下拉列表中将选定数字隐藏到第八个。

为此目的，我只会显示八个选择下拉菜单中的两个。

查看代码 -

选择下拉一个 -

<div class="col-xs-12 col-sm-3"> 
<div class="form-group"> 
    <?php echo Form::label('test_id', 'Test', array('class' => 'col-xs-3 control-label')) ?> 
    <div class="col-xs-9"> 
     <select name="test_id" id="test_id" class="form-control select2" data-placeholder="Select..."> 
      <option value=""></option>          
      <?php foreach (ORM::factory('Test')->order_by('id')->find_all() as $row) : ?> 
      <option value="<?php echo $row->id ?>" 
      <?php if ($b->id == $row->id) echo 'selected="selected"' ?>> 
      <?php echo $row->id ?></option> 
      <?php endforeach ?> 
     </select> 
    </div> 
</div> 

选择下拉两

<div class="col-xs-12 col-sm-3"> 
<div class="form-group"> 
    <?php echo Form::label('test_id', 'Test', array('class' => 'col-xs-3 control-label')) ?> 
    <div class="col-xs-9"> 
     <select name="test_id" id="test_id" class="form-control select2" data-placeholder="Select..."> 
      <option value=""></option>          
      <?php foreach (ORM::factory('Test')->order_by('id')->find_all() as $row) : ?> 
      <option value="<?php echo $row->id ?>" 
      <?php if ($b->id == $row->id) echo 'selected="selected"' ?>> 
      <?php echo $row->id ?></option> 
      <?php endforeach ?> 
     </select> 
    </div> 
</div> 

jQuery代码 -

var $selects = $('select'); 
$('select').change(function() { 
    $('option:hidden', $selects).each(function() { 
     var self = this, 
      toShow = true; 
     $selects.not($(this).parent()).each(function() { 
      if (self.value == this.value) toShow = false; 
     }) 
     if (toShow) $(this).show(); 
    }); 
    if (this.value != "") //to keep default option available 
     $selects.not(this).children('option[value=' + this.value + ']').hide(); 
}); 

这丝毫不能奏效。

任何帮助，将不胜感激。

干杯

Answer 1

这不适用于select2和hidden选项。你可以通过禁用选项和一些CSS来隐藏它们来解决这个问题。请看下图：

JS

$(document).ready(function() { 
    var $selects = $('select'); 
    $selects.select2(); 
    $('select').change(function() { 
     $('option:hidden', $selects).each(function() { 
      var self = this, 
       toShow = true; 
      $selects.not($(this).parent()).each(function() { 
       if (self.value == this.value) toShow = false; 
      }) 
      if (toShow) { 
       $(this).removeAttr('disabled'); 
       $(this).parent().select2(); 
      } 
     }); 
     if (this.value != "") { 
      $selects.not(this).children('option[value=' + this.value + ']').attr('disabled', 'disabled'); 
      $selects.select2(); 
     } 
    }); 
}) 

CSS

.select2-results .select2-disabled { 
    display:none; 
} 

工作示例这里：http://jsfiddle.net/10nwqwck/4/

Answer 2

像这样的东西可能会奏效：

$(".select").click(function() { 
    var value = $(this).val(); 

    // to hide every option that have the selected value 
    $("option").filter(function() {  
     return $(this).val() == value; 
    }).hide(); 

    // to show the option currently selected in the current list 
    $(this).find("option").each(function() { 
     if ($(this).val() == value) 
     { 
      $(this).show(); 
     } 
    }); 
}); 

希望这有助于。

Answer 3

干杯弗拉德是工作搭档。

为了使jQuery更加优化，已经完成了。

$(document).ready(function() { 
var $selects = $('select'); 
$selects.select2(); 
$('select').change(function() { 
    $('option:hidden', $selects).each(function() { 
     var self = this, 
      toShow = true; 
     $selects.not($(this).parent()).each(function() { 
      if (self.value == this.value) toShow = false; 
     }) 
     if (toShow) { 
      $(this).removeAttr('disabled'); 
     } 
    }); 
    if (this.value != "") { 
     $selects.not(this).children('option[value=' + this.value + ']').attr('disabled', 'disabled'); 
    } 
}); 

}）

谢谢您的帮助:)