选择选择：已选择的其他下拉菜单中的“禁用”选项

Question

我正在使用选择的选择和引导框架。 我有6组选择（这些不是静态的，我们添加了更多的generate下拉菜单）所有选项都相同。 如果在第一个下拉菜单中选择了一个选项，则应在其他下拉菜单中禁用该选项。 我对此有一些解决方案。 但是，当我在bootstrap类中使用它时，它将无法工作。 任何人都可以让我知道代码中的错误是什么。
这是我的代码示例

 var selected = []; $('.disabled-select').change(function() { var value = $(this).val(); if (selected[$(this).attr('id')] !== '') { var oldValue = selected[$(this).attr('id')]; $(this).siblings('.col-md-4').addBack().children('option').each(function() { if ($(this).val() === oldValue) $(this).removeAttr('disabled').trigger('chosen:updated'); }); } selected[$(this).attr('id')] = value; $(this).siblings('.col-md-4').addBack().children('option').each(function() { if ($(this).val() === value) $(this).attr('disabled', true).trigger('chosen:updated'); }); }); 

 .chosen-select-deselect { width: 100%; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://harvesthq.github.io/chosen/chosen.css" /> <div class="container"> <div class="row"> <div class="col-md-4"> <select data-placeholder="Choose a Country..." id="1" class="chosen-select-deselect disabled-select" tabindex="1"> <option value=""></option> <option value="United States">United States</option> <option value="United Kingdom">United Kingdom</option> <option value="Afghanistan">Afghanistan</option> <option value="Aland Islands">Aland Islands</option> <option value="Albania">Albania</option> <option value="Algeria">Algeria</option> </select> </div> <div class="col-md-4"> <select data-placeholder="Choose a Country..." id="2" class="chosen-select-deselect disabled-select" tabindex="1"> <option value=""></option> <option value="United States">United States</option> <option value="United Kingdom">United Kingdom</option> <option value="Afghanistan">Afghanistan</option> <option value="Aland Islands">Aland Islands</option> <option value="Albania">Albania</option> <option value="Algeria">Algeria</option> </select> </div> <div class="col-md-4"> <select data-placeholder="Choose a Country..." id="3" class="chosen-select-deselect disabled-select" tabindex="1"> <option value=""></option> <option value="United States">United States</option> <option value="United Kingdom">United Kingdom</option> <option value="Afghanistan">Afghanistan</option> <option value="Aland Islands">Aland Islands</option> <option value="Albania">Albania</option> <option value="Algeria">Algeria</option> </select> </div> </div> <div class="row"> <div class="col-md-4"> <select data-placeholder="Choose a Country..." id="4" class="chosen-select-deselect disabled-select" tabindex="1"> <option value=""></option> <option value="United States">United States</option> <option value="United Kingdom">United Kingdom</option> <option value="Afghanistan">Afghanistan</option> <option value="Aland Islands">Aland Islands</option> <option value="Albania">Albania</option> <option value="Algeria">Algeria</option> </select> </div> <div class="col-md-4"> <select data-placeholder="Choose a Country..." id="5" class="chosen-select-deselect disabled-select" tabindex="1"> <option value=""></option> <option value="United States">United States</option> <option value="United Kingdom">United Kingdom</option> <option value="Afghanistan">Afghanistan</option> <option value="Aland Islands">Aland Islands</option> <option value="Albania">Albania</option> <option value="Algeria">Algeria</option> </select> </div> <div class="col-md-4"> <select data-placeholder="Choose a Country..." id="6" class="chosen-select-deselect disabled-select" tabindex="1"> <option value=""></option> <option value="United States">United States</option> <option value="United Kingdom">United Kingdom</option> <option value="Afghanistan">Afghanistan</option> <option value="Aland Islands">Aland Islands</option> <option value="Albania">Albania</option> <option value="Algeria">Algeria</option> </select> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script> <script src="https://harvesthq.github.io/chosen/docsupport/prism.js" type="text/javascript" charset="utf-8"></script> <script src="https://harvesthq.github.io/chosen/docsupport/init.js" type="text/javascript" charset="utf-8"></script> 

Answer 1

var $select = $("select");
$select.on("change", function() {
var selected = [];  
$.each($select, function(index, select) {           
    if (select.value !== "") { selected.push(select.value); }
});         
  $("option").prop("disabled", false);         
  for (var index in selected)
   {          
     ('option[value="'+selected[index]+'"]').prop("disabled", true); }
     });

这对我来说有点麻烦，但是我认为这应该可以直接用于您的代码（在我的一端成功测试）； 需要jQuery。