javascript - 通过 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>

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

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

Answer 1

如评论中所述，您应该避免使用 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);
});