Question

这是我的代码，我试图将数组中的元素追加到下拉选择框中。代码工作正常，直到appendChild方法。我无法弄清楚为什么一条线不起作用。这是代码

</head>
<body>
    <h1> Eat Page</h1>
    <p id="test">Hi</p>
    <select id="CusineList"></select>

    <script type="text/javascript">

        var cuisines = ["Chinese","Indian"];
        var sel = document.getElementById('CuisineList');

        for(var i = 0; i <cuisines.length; i++){

            var optionElement = document.createElement("option");

            optionElement.innerHTML = cuisines[i];

            optionElement.value = i;//cuisines[i];
            //document.getElementById("test").innerHTML = cuisines.length;
            sel.appendChild(optionElement);

        }
    </script>

    <p> When </p>
</body>

</html>

Answer 1

你有法术错过。

您的ID为CusineList，但是当您使用CuisineList进行选择时。

除此之外，your code works。

Answer 2

上有拼写错误

var sel = document.getElementById('CuisineList');

这应该是

var sel = document.getElementById('CusineList');

或者更改你的HTML。从

<select id="CusineList"></select>

要

<select id="CuisineList"></select>

Answer 3

当我们使用java脚本追加节点时，首先设置节点的属性/属性之后我们必须将此节点附加到其相关的父节点中，并且在追加节点之后，我们可以设置其内容或相关的内部HTML /文本。

这是上述问题的解决方案：

var cuisines = ["Chinese", "Indian"];var sel = document.getElementById('CusineList');
var optionElement;
for (var i = 0; i < cuisines.length; i++) {
    optionElement = document.createElement("option");
    optionElement.value = i;
    sel.appendChild(optionElement);
    optionElement.innerHTML = cuisines[i];
    document.getElementById("test").innerHTML = cuisines.length;
}

我使用http://codebins.com/codes/home/4ldqpcn

上的解决方案创建了一个bin

javascript appendChild无效

3 个答案: