Question

我有一个javascript函数，我写的是根据单击的单选按钮将选择框附加到radiobutton集。当单击其中一个时，它会执行此操作。问题是，我是一个业余爱好者，我不能让它停止添加新的选择元素到我设置的范围。我不断尝试不同的方法来检查元素或其innerHtml是否已设置和然后使用该检查来决定是否创建另一个选择。这些都不适用于我。任何人都可以指向我这方面的教程（我一直在搜索，几乎尝试了所有的东西，没有fez让我认为它是整个函数结构的一个更简单的问题）。

这是代码，任何关于此的灯光都会非常有用。我只是自学编码，所以我知道这太可怕了。谢谢你的帮助!!

function moreInput(vInput)  {
var moreD = document.getElementById('moreD');
//document.write(moreD);
    if(vInput == \"approved\")  {
        if(moreD.length > 0)    {
            moreD.removeChild(approvedOpts);
        }
        var select = document.createElement(\"select\");
        select.options[0] = new Option('a');
        select.options[1] = new Option('b');
        select.options[2] = new Option('c');
        select.setAttribute(\"name\",\"approvedOptsA\");
    }
    if(vInput == \"denied\")    {
        //alert(moreD.innerHtml);
        //if(moreD.innerHtml === 'undefined')   {
            //moreD.removeChild(approvedOptsD);
            var select = document.createElement(\"select\");
            select.options[0] = new Option('x');
            select.options[1] = new Option('y');
            select.options[2] = new Option('z');
            select.setAttribute(\"id\",\"approvedOptsD\");
            select.
        //}
    }
moreD.appendChild(select);

}

Answer 1

您只需添加新选择，您需要在添加新选择之前删除旧选择。请尝试以下代码（我已删除您的注释行）：

function moreInput(vInput)  {
    var moreD = document.getElementById('moreD');
    if(vInput == "approved")  {
        if(moreD.length > 0)    {
            moreD.removeChild(approvedOpts);
        }
        var select = document.createElement("select");
        select.options[0] = new Option('a');
        select.options[1] = new Option('b');
        select.options[2] = new Option('c');
        select.setAttribute("name","approvedOptsA");
    }
    if(vInput == "denied")    {
        var select = document.createElement("select");
        select.options[0] = new Option('x');
        select.options[1] = new Option('y');
        select.options[2] = new Option('z');
        select.setAttribute("id","approvedOptsD");

    }
moreD.removeChild(document.getElementById("approvedOptsD"));
moreD.removeChild(document.getElementById("approvedOptsA"));
moreD.appendChild(select);

它可能会引发一些警告，我没有测试过，但你应该知道你在寻找什么。

This是一篇陈旧但仍然准确且有用的文章，介绍如何使用javascript动态添加和删除dom节点。

Answer 2

在添加任何新元素之前删除所有元素。

此代码应该有效：

<script type=\"text/javascript\">

function moreInput(vInput)  {
    var moreD = document.getElementById('moreD');
        if(vInput == \"approved\")  {
            removeAllChildrens(moreD);
            var select = document.createElement(\"select\");
            select.options[0] = new Option('Comped Table');
            select.options[1] = new Option('Comped Drink');
            select.options[2] = new Option('Comped Cover');
            select.setAttribute(\"name\",\"approvedOptsA\");
        }
        if(vInput == \"denied\")    {
                removeAllChildrens(moreD);
                var select = document.createElement(\"select\");
                select.options[0] = new Option('Need to Reserve Table');
                select.options[1] = new Option('At Capacity');
                select.options[2] = new Option('Private Event');
                select.setAttribute(\"id\",\"approvedOptsD\");
        }
    moreD.appendChild(select);
}

function removeAllChildrens(cell) {
    if ( cell.hasChildNodes() ) {
        while ( cell.childNodes.length >= 1 ) {
            cell.removeChild( cell.firstChild );       
        } 
    }
}

 </script>

Javascript完全业余？

2 个答案: