刪除一個下拉項目，如果它被選中

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'); 
    } 
}); 

}）

謝謝您的幫助:)