Javascript代码使用三次后执行两次

Question

我正在尝试创建一个连续创建下拉菜单的 JavaScript 命令。但是，如果我更改下拉菜单，子下拉菜单应该消失。这是 JavaScript:

var categorycount = 0;

function categorygenerate() {

    //for testing purposes
        var categoryarray = new Array(), i;
        for (i = 0; i < 2; i++) {
            categoryarray[i] = Math.random();
        }
        return categoryarray;
    }
    function delete_category(selectedcategory){
        restar = categorycount - selectedcategory;
        categoria = "category" + restar;
        var element = document.getElementById(categoria);
        element.parentNode.removeChild(element);
        categorycount = restar;
    }

function dropdowngenerate(divname) {
    comparelevel = divname.slice(-1);
    if (comparelevel != categorycount){
        delete_category(comparelevel)
    }
    else{
    ++categorycount;
    var categoria = "category" + categorycount;
    var newDiv=document.createElement('div');
    var html = '<select>', categories = categorygenerate(), i;
    for(i = 0; i < categories.length; i++) {
        html += "<option value='"+categories[i]+"'>"+categories[i]+"</option>";
    }
    html += '</select>';
    newDiv.innerHTML= html;
    document.getElementById(divname).appendChild(newDiv);
    newDiv.setAttribute("id",categoria);
    newDiv.setAttribute('onchange', "dropdowngenerate('"+categoria+"');");
    }
}

这是 HTML:

<div id="category0">
<select onchange="dropdowngenerate('category0');">
    <option>test1</option>
    <option>test2</option>
    <option>test3</option>
</select>
<br>
</div>

该脚本前 3 次运行良好，但在第四个下拉列表中，该脚本被调用两次。第一次调用时，它可以正常工作。第二次，它的执行就像第二个下拉列表(category1)已更改一样，并删除其余的下拉列表。

有什么线索吗？

Answer 1

已编辑:

此代码将查找作为嵌套子项容器的现有同级。如果它找到一个，就会将其删除。然后创建一个新的此类容器并附加事件处理程序。

document.getElementById("selectCategory_0").addEventListener("change", handle_onChange);

function handle_onChange(event){
  var parentContainer = this.parentNode;

  // ---------------------------
  // if a child dropdown exist, remove it
  // ---------------------------
  var childContainer = parentContainer.querySelector(".selectContainer");
  if (childContainer) { parentContainer.removeChild(childContainer); }
  // ---------------------------

  // ---------------------------
  // create a new child dropdown
  // ---------------------------
  var categories = categorygenerate();
  childContainer = generateChild(document, categories);
  // ---------------------------

  // ---------------------------
  // add the new childContainer to the DOM "after" the current dropdown
  // ---------------------------
  parentContainer.insertBefore(childContainer, this.nextSibling);
  // ---------------------------
}

function generateChild(root, categories){
  // ---------------------------
  // build an html string
  // ---------------------------
  var html = "<div class='selectContainer'><select>";
  for (var i = 0; i < categories.length; i++) {
    html += "<option value='" + categories[i] + "'>" + categories[i] + "</option>";
  }
  html += '</select></div>';
  // ---------------------------

  // ---------------------------
  // create an element from the html string
  // ---------------------------
  var tplt = root.createElement('template');
  tplt.innerHTML = html;
  var el = tplt.content.firstChild;
  // ---------------------------

  // ---------------------------
  // attach the change handler
  // ---------------------------
  el.firstChild.addEventListener("change", handle_onChange);
  // ---------------------------
  
  return el;
}

function categorygenerate() {
  var categoryarray = new Array()

  // ---------------------------
  // for testing purposes
  // ---------------------------
  for (var i = 0; i < 2; i++) {
    categoryarray[i] = Math.random();
  }
  // ---------------------------

  return categoryarray;
}

.selectContainer { padding: 1em;}

<div id="category0" class="selectContainer">
  <select id="selectCategory_0">
    <option>test1</option>
    <option>test2</option>
    <option>test3</option>
  </select>
</div>