Удалить выпадающий элемент, если он выбран

Question

У меня есть несколько экземпляров выпадающих списков выбора по форме, восемь, чтобы быть точным. Если я выберу номер в первом выпадающем списке, я хочу скрыть выбранный номер со второго выбора, выпадающего вниз до восьмого.

Для этого я буду только показать два из восьми избранных падения капель.

View Code -

Выберите выпадающий один -

<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 и скрытыми опциями. Вы можете обойти это, отключив параметры и немного 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'); 
    } 
}); 

})

Спасибо за вашу помощь :)