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

Create new drop downs on change event using jQuery

本文关键字：创建 下拉列表 事件 jQuery 使用      更新时间：2023-09-26

我有一些随机值的下拉菜单。当我选择的值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正确实现这一点吗?

我们可以这样做:

我们只是添加了一些类，比如executed，一旦它添加了另一个下拉菜单。在事件处理器中，我们检查当前dropwon是否有那个类。如果它已经在那里，那么就意味着我们已经完成了下拉菜单，如下所示:

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

相关文章：