使用Java代碼3次后執行兩次

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次運行良好，但在第4個下拉列表中，該腳本被調用了兩次。 第一次調用時，它可以正常工作。 第二次，它就像第二個下拉列表（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> 

Answer 2

如果您想保留代碼，一種簡單的方法是使用類似

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

這將刪除最后一個孩子（即category1）以及該孩子的孩子。 我不太了解您的想法，但希望能對您有所幫助。 ：P