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

Question

我正在使用选择的select＆bootstrap框架。我有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>