使用Live Server运行后Javascript下拉菜单不显示但可正常取值

你的问题核心是给option元素设置显示文本时用错了属性——你代码里用了context，但DOM元素并没有这个内置属性，导致选项虽然被成功添加到下拉框中，却没有可见的显示文本，看起来是空的，但实际value值是正确的，所以选中后能拿到有效数据。

修复方法 #

把代码里的el.context和cl.context替换成el.textContent（推荐用这个，兼容性和性能更优），也可以用innerText或innerHTML，效果一致。

修复后的完整代码 #

JavaScript 代码

console.log("Hello world");

var ageSelect = document.getElementById("age");
var ageNumber = 12;
var colorSelect = document.getElementById("color")
var colorArray = ['Red', 'Blue', 'Green', 'Yellow', 'Pink', 'Black'];

let data = {};

for (let i = ageNumber; i < 30; i++){
    var el = document.createElement("option");
    el.textContent = i; // 修正属性
    el.value = i;
    ageSelect.appendChild(el);
}

for (var j = 0; j < colorArray.length; j++){
    var cl = document.createElement("option");
    cl.textContent = colorArray[j]; // 修正属性
    cl.value = colorArray[j];
    colorSelect.appendChild(cl);
}

function capitalize() {
    var nameString = document.getElementById("username").value;
    var splitString = nameString.split(" ")
    var outputString = "";

    for (var n = 0; n < splitString.length; n++){
        if (n != 0){
            outputString = outputString + " "
        }
        outputString = outputString + splitString[n].charAt(0).toUpperCase() + splitString[n].slice(1).toLowerCase();
    }

    document.getElementById("username").value = outputString

}

document.getElementById("but").addEventListener("click", function click(){
    data.name = document.getElementById("username").value;
    data.age = document.getElementById("age").value;
    data.color = document.getElementById("color").value;
    console.table(data) 

});

HTML 代码

Name: <input type="text" id="username" name="username" onchange="capitalize();"><br>
Age: <select id="age" name="age"></select><br>
Favorite Color: <select id="color" name="color"></select><br>
<button type="button" id="but">Submit</button>

额外优化提示 #

年龄循环里的var opt = i.toString(); var opt = i;是冗余代码，可直接删除，textContent会自动将数字转换为字符串。

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