Question

我试图填充标题中描述的dropmenu。目前我已经使用了这段代码：

<form id="myForm">
<select id="selectNumber">
     <option>Choose a number</option>
     <script>
         var myArray = new Array("1", "2", "3", "4", "5");
         for(i=0; i<myArray.length; i++) {  
             document.write('<option value="' + myArray[i] +'">' + myArray[i] + '</option>');
         }
     </script>
</select>
</form>

这很好用，但是我的数组中有很多变量，所以我想将脚本作为函数放在javascript文件中，然后在html中调用它以达到美学目的。

所以这就是我在javascript文件中尝试的内容

function populate(){
    var myArray = new Array("1", "2", "3", "4", "5");
    for(i=0; i<myArray.length; i++) {  
        document.write('<option value="' + myArray[i] +'">' + myArray[i] + '</option>');
    }
}

然后我尝试在HTML中调用该方法：

<form id="myForm">
    <select id="selectNumber" onclick="populate()">
        <option>Choose a number</option>
    </select>
</form>

这并没有起作用，它只是带来了一个新页面和数字，但没有在下拉菜单中进行选择。

非常感谢有关如何修复它的任何想法

Answer 1

正如评论中所述，您应该避免使用document.write()并使用createElement / appendChild的组合。

您也可以避免使用内联JS并改为使用unobtrusive JS：

＆＃13;

var selectElement = document.getElementById('selectNumber'),
    optionArray = [1, 2, 3, 4, 5];

function populateSelectElement (element, array) {
    var newElement,
        i;
    for(i = 0; i < array.length; i += 1) {
        newElement = document.createElement('option');
        newElement.textContent = optionArray[i];
        element.appendChild(newElement);
    }
}
populateSelectElement(selectElement, optionArray);

＆＃13;

<form id="myForm">
    <select id="selectNumber">
        <option>Choose a number</option>
    </select>
</form>

＆＃13;

然后只需附加一个点击事件处理程序，如下所示：

selectElement.addEventListener('click', function() {
    populateSelectElement(this, optionArray);
});

Answer 2

使用document.write()时，必须在加载页面时执行脚本。您使用onclick调用该函数，这显然不是在加载时。而是直接调用该函数：

<select id="selectNumber">
  <option>Choose a number</option>
  <script>
     populate();
  </script>
</select>

在函数调用

之前必须包含javascriptfile

通过JavaScript函数填充HTML下拉菜单

2 个答案: