使用document.forms为select标签添加选项失败，求排查问题

算力阿峰

2026-8-11

问题描述

我尝试通过document.forms将数组元素填充到页面的下拉选择框中，但下拉框始终为空，代码如下：

HTML代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>1</title>
<script src="main.js"></script>
</head>
<body onLoad="OnLoad()">
<form name="form">
    <select name="weapons" onChange="SelectWeapon()"></select>
</form>
</body>
</html>

JavaScript代码

var weaponsArray = [
    'Broadsword',
    'Crossbow',
    'Magic staff'
];


function OnLoad() {
    for (var i = 0; i < weaponsArray.length; i++) {
        var wepType = "<option value = '" + i + "'>" + weaponsArray[i] + "</option>";
        document.forms["form"]["weapons"] += wepType;
    }
}

问题原因与解决方法

核心问题

你直接给document.forms["form"]["weapons"]（对应页面的select元素）拼接HTML字符串是无效的——select元素不能通过这种方式添加选项，这不是正确的DOM操作方式。

修复方案1：使用innerHTML属性

修改OnLoad函数，直接操作select元素的innerHTML来添加选项：

function OnLoad() {
    var selectElement = document.forms["form"]["weapons"];
    for (var i = 0; i < weaponsArray.length; i++) {
        var wepType = "<option value = '" + i + "'>" + weaponsArray[i] + "</option>";
        selectElement.innerHTML += wepType;
    }
}

修复方案2：标准DOM创建元素（推荐）

这种方式是更规范的DOM操作，兼容性和可维护性更好：

function OnLoad() {
    var selectElement = document.forms["form"]["weapons"];
    for (var i = 0; i < weaponsArray.length; i++) {
        // 创建option元素实例
        var option = document.createElement("option");
        option.value = i;
        option.textContent = weaponsArray[i];
        // 将option添加到select中
        selectElement.appendChild(option);
    }
}