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

Question

我正在尝试按照标题中的说明填充下拉菜单。目前我有这段代码：

<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>

这没有用，它只是带来了一个新页面和数字，但没有出现在 select 的下拉菜单中。

任何关于如何修复它的想法将不胜感激

Answer 1

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

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

必须在函数调用之前包含 javascript 文件

Answer 2

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

您也可以避免使用内联 JS，而是使用 unobtrusive JS：

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);

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

然后像这样附加一个点击事件处理程序：

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

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

Populating a HTML dropdown menu through a JavaScript function

html

javascript