JavaScript如何用对象键为option值、值为显示文本填充下拉选择框

问题原因 #

你当前代码无法生效主要有两个核心错误：

• 你定义的months是普通对象，不是数组，没有length属性，无法通过for (let i = 0; i < months.length; i++)的方式遍历
• months[i].keys()的用法错误，keys()是Object的静态方法，不能直接在对象属性上调用

修正后代码 #

JS 代码 #

var monthOptions = document.getElementById("month");
function loadMonths(months){
    monthOptions.innerHTML = '';
    // 遍历对象的键值对
    for (const key in months) {
        // 过滤原型链上的属性
        if (months.hasOwnProperty(key)) {
            var el = document.createElement("option");
            // 显示文本用对象的值
            el.textContent = months[key];
            // value属性用对象的键
            el.value = key;
            monthOptions.appendChild(el);
        }
    }
}

// 调用示例
const months = {"":"--None--", "jan":"January", "feb":"February", "mar":"March"};
loadMonths(months);

如果你的运行环境支持ES6+，也可以用更简洁的Object.entries写法：

function loadMonths(months){
    monthOptions.innerHTML = '';
    Object.entries(months).forEach(([key, value]) => {
        const el = document.createElement("option");
        el.textContent = value;
        el.value = key;
        monthOptions.appendChild(el);
    })
}

HTML 代码 #

无需修改，和你原有代码一致即可：

<select name="month" id="month" required></select>

内容的提问来源于stack exchange，提问作者user3038672