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 for dropdown：

<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是否具有该类。如果它已经存在那么这意味着我们已经完成了下拉列表：

＆＃13;

$(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");
    
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: