Javascript 使用jQuery创建更改事件的新下拉列表

我有一些随机值的下拉菜单。当我选择值onchange event triggers时，我想在它下面添加新的下拉列表，但新的下拉列表应该包含除第一个下拉列表中的选定值之外的所有值。现在，当我更改第二个的值时，我需要第三个，它只有前两个下拉列表中未选择的值，依此类推，直到没有更多选项可选择为止

我现在拥有的是添加新下拉列表的机制，但它不能正常工作。例如，如果我选择第一个值，它将执行此任务，将显示“新建”下拉列表，并且它具有除所选选项之外的所有选项。但若我返回并尝试更改第一个下拉列表的选项，则会创建第三个下拉列表。这种情况不应该出现，如果下拉列表已经创建了另一个下拉列表，则不应再次创建。对于已经触发的下拉列表，是否可以避免触发新的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 for下拉列表：

<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>

---

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

我们可以通过以下方式实现：

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

$document.readyfunction{ var selectWrapper=$'select-box'； $document.on'change'，'dynamic select'，函数{ var元素=$this； ifelement.hasClassexecuted 回来 var optionsLength=element.find'option'.length-1； 如果选项长度===1{ 返回true； } var newSelect=$this.clone； newSelect.findoption[value='+element.val+'].remove； newSelect.appendToselectWrapper $this.addClassexecuted； }; }; .动态选择{ 显示：块； 利润率：10px； } 贝尔宾 掠夺 PPA PPA+ 基础知识 PCT

---

欢迎@nemo_87。即使我们可以从当前选择框中删除该类dynamic select，但它将改变您的UI外观。

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