在动态添加的下拉列表中禁用已选择的选项

Question

在页面加载时，我从中选择了 3 个 select，具有相同的选项并添加更多按钮。单击添加更多按钮，它会创建一个包含 3 个下拉菜单的新行，具有相同的选项。当我 select 一个选项时，该选项在其他下拉列表中被禁用，这在默认下拉列表中工作正常，但是当创建新行时，这不适用于动态添加的下拉列表。这是我的代码，请让我知道我的代码中有什么错误。

$('.disabled-select').on('change', function () {
    $('option').prop('disabled', false);
    $('.disabled-select').each(function () {
        var val = this.value;
        $('.disabled-select').not(this).find('option').filter(function () {
            return this.value === val;
        }).prop('disabled', true);
    });
    $('.disabled-select').chosen().trigger("chosen:updated");
});

var addMRow = '<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="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="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>';



$('.addRow').click(function () {
    $(this).after(addMRow);
    $('.chosen-select-deselect').chosen({
        allow_single_deselect: true

    });
});

/*----------------working code--------------------*/

  .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="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="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>
        <div class="row">
            <div class="col-md-12">
                <a href="javascript:void(0);" class="addRow">Add more</a>
            </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

您可以在每次添加行时添加触发定义 change 事件的函数，也可以在添加行后调用禁用逻辑：

var selected = [];

triggerOnChangeDef();

function triggerOnChangeDef() {
  $('.disabled-select').on('change', function(event, params) {
    if (typeof params != 'undefined') {
      $(this).data('selected', params.selected);
      $('option').prop('disabled', false);
      $('.disabled-select').each(function() {
        var val = this.value;
        if (val != "" && selected.indexOf(val) == -1)
          selected.push(val);
        $('.disabled-select').not(this).find('option').filter(function() {
          return selected.indexOf(this.value) > -1;
        }).prop('disabled', true);
      });
      $('.disabled-select').chosen().trigger("chosen:updated");
    } else {
      var data = $(this).data("selected");
      //console.log(data);
      if (data) {
        selected.splice(selected.indexOf(data), 1);
        disableOptions();
        $(this).data("selected", null);
      }
    }
  });
}

function disableOptions() {
  $('option').prop('disabled', false);
  $('.disabled-select').each(function() {
    $('.disabled-select').not(this).find('option').filter(function() {
      return selected.indexOf(this.value) > -1;
    }).prop('disabled', true);
  });
  $('.disabled-select').chosen().trigger("chosen:updated");
}

var addMRow = '<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="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="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>';



$('.addRow').click(function() {
  $(this).after(addMRow);
  $('.chosen-select-deselect').chosen({
    allow_single_deselect: true
  });
  disableOptions();
  triggerOnChangeDef();
});

/*----------------working code--------------------*/

.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="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="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>
  <div class="row">
    <div class="col-md-12">
      <a href="javascript:void(0);" class="addRow">Add more</a>
    </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>

在动态添加的下拉列表中禁用已选择的选项

Disable already selected option in dynamically added drop down

html

javascript

jquery

jquery-chosen

ecmascript-6