Question

有人可以向我解释一下我的javascript代码出了什么问题，为什么我无法在运行此脚本后自动填充此复选框项目的下拉列表：

<select id="myselect" name="myselect"></select>

作为html部分，

...以下是javascript：

    function populate(slct2) {
        var s2 = document.getElementById(myselect);
        s2.innerHTML = "";

        var optionArray = ["option1", "option2", "option2"];


        for (var option in optionArray) {

            var pair = optionArray[option];
            var newOption = document.createElement("option");
            newOption.value = pair;
            newOption.innerHTML = pair;
            s2.options.add(newOption);

    }
}

我也把它放在一个jsfiddle： http://jsfiddle.net/9aZQF/339/ 这是另一个由其他人撰写的jsfiddle的简单变体。提前致谢。

Answer 1

您的代码有3个问题 - 一个可能是jsfiddle特有的，而不是您的实际代码：

myselect是您元素的ID，getElementById期望此值为字符串。
您的jsfiddle从不调用函数populate
在数组上使用for...in会产生一些奇怪的副作用 - 列出每个函数/内部属性和数组的值。让我们倒退。

为什么for..in在包含mootools时会给出奇怪的结果，因为mootools会为Array对象添加其他属性：

＆＃13;

var arr = ["One","Two", "Three"];
for(var item in arr){
  console.log(item);
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.js"></script>

＆＃13;

使用for...of代替

＆＃13;

var arr = ["One","Two", "Three"];
for(let item of arr){
  console.log(item);
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.js"></script>

＆＃13;

要解决数字2.只需调用你的函数：

populate();

要解决数字1，请将引号的id包装在引号中：

 var s2 = document.getElementById("myselect");

这就是整个工作：

＆＃13;

function populate() {
    var s2 = document.getElementById("myselect");
    s2.innerHTML = "";

    var optionArray = ["option1", "option2", "option2"];


  for (let option of optionArray) {

        var pair = option;
        var newOption = document.createElement("option");
        newOption.value = pair;
        newOption.innerHTML = pair;
        s2.options.add(newOption);

  }
}

populate();

＆＃13;

   Choose Subcategory:
<select id="myselect" name="myselect"></select>

＆＃13;

基于带有选项

1 个答案: