使用 jQuery 在更改事件上创建新的下拉菜单

Question

我有一些随机值的下拉菜单。当我选择值 onchange 事件触发器并且我想在它下面添加新的下拉列表时，但是新的下拉列表应该具有除第一个下拉列表中选择的值之外的所有值。现在，当我更改第二个的值时，我需要第三个只有前两个下拉列表中未选择的值的值，依此类推，直到没有更多选项可供选择。

我现在拥有的是添加新下拉菜单的机制，但它无法正常工作。例如，如果我选择第一个值，它将完成这项工作，将显示新的下拉列表，并且它具有除选定选项之外的所有选项。但是，如果我回去尝试更改第一个下拉菜单的选项，则会创建第三个下拉菜单。这不应该是一种情况，如果下拉已经创建了另一个下拉，它不应该再做一次。是否有可能避免为已经触发的下拉菜单触发新的 onchange 事件？或者也许其他类型的事件更适合这种情况？

这是我描述的工作的功能：

createNewDropDonws : function() {
    var selectWrapper = $('#select-boxes');
    $(document).on('change', '.dynamic-select', function() {
        var element = $(this);
        var optionsLength = (element.find('option').length) - 1;

        if(optionsLength === 1) {
        return true;
        }

        var newSelect = $(this).clone();
        newSelect.find("option[value='" + element.val() + "']").remove();
        newSelect.appendTo(selectWrapper)
    });
}

这是我的下拉 HTML：

<div id="select-boxes">
    <select class="dynamic-select" id="ddlTest">
      <option value=""></option>
      <option value="Belbin">Belbin</option>
      <option value="Raven">Raven</option>
      <option value="PPA">PPA</option>
      <option value="PPA+">PPA+</option>
      <option value="Basic Knowledge">Basic Knowledge</option>
      <option value="PCT">PCT</option>
    </select>
  </div>

这是一个简单的 CSS 类：

.dynamic-select{
  display: block;
  margin: 10px;
  }

有人知道如何使用 jQuery 正确实现吗？

Answer 1

我们可以通过以下方式进行：

我们只是在添加另一个下拉列表后添加一些像executed 这样的类。在事件处理程序中，我们正在检查当前 dropdwon 是否具有该类。如果它已经存在，则意味着我们已经完成了该下拉菜单，如下所示：

$(document).ready(function() {
  var selectWrapper = $('#select-boxes');
  $(document).on('change', '.dynamic-select', function() {
    var element = $(this);
    if(element.hasClass("executed"))
      return;
    
    var optionsLength = (element.find('option').length) - 1;

    if (optionsLength === 1) {
      return true;
    }

    var newSelect = $(this).clone();
    newSelect.find("option[value='" + element.val() + "']").remove();
    newSelect.appendTo(selectWrapper)
    
    $(this).addClass("executed");
    
  });
});

.dynamic-select {
  display: block;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="select-boxes">
  <select class="dynamic-select" id="ddlTest">
    <option value=""></option>
    <option value="Belbin">Belbin</option>
    <option value="Raven">Raven</option>
    <option value="PPA">PPA</option>
    <option value="PPA+">PPA+</option>
    <option value="Basic Knowledge">Basic Knowledge</option>
    <option value="PCT">PCT</option>
  </select>
</div>