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

<强> EDITED ：

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

＆＃13;

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

＆＃13;

.selectContainer { padding: 1em;}

＆＃13;

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

＆＃13;

Answer 2

如果你想保留你的代码，一个简单的方法就是使用像

这样的函数

("#category0").lastChild.remove()

删除最后一个孩子（类别1）以及该孩子的孩子。我并不是真的理解你的想法，但我希望能有所帮助。：P

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

2 个答案: