动态创建的<select>元素值无法设置，取值报Null错误求助

1. 触发Null错误的原因 #

你调用alert(document.getElementById("select"+x).value)时，还没把创建好的sel元素添加到页面DOM中。document.getElementById只能检索已经挂载到DOM树里的元素，此时sel还只是内存中的对象，未通过div1.appendChild(sel)添加到页面，所以获取到的结果是null，访问null.value自然会抛出Null错误。

2. select值未被设置的原因 #

你用sel.innerHTML += list.outerHTML的方式添加option，这种操作会先取出当前sel的innerHTML内容，拼接上新option的HTML字符串，再重新解析渲染成DOM元素。这个过程会重置select的内部状态，而且新添加的option无法维持预期的选中逻辑（默认select会选中第一个option，但这种拼接方式会破坏初始选中状态）。更可靠的方式是直接用sel.appendChild(list)将创建好的option元素添加到select中，能完整保留元素状态与DOM结构。

修正后的核心代码示例 #

// 创建select元素部分不变
let list;
let sel = document.createElement('select');
sel.style.fontSize = "18px";
sel.style.float = "right";
sel.style.marginTop = "12px";
sel.style.marginRight = "10px";
sel.id = "select" + x;

// 替换innerHTML拼接为直接appendChild
for (let y = 0; y < selectSizes.length; y++){
    list = document.createElement('option');
    list.value = Number(selectCosts[y]);
    let selectedValue = Number(list.value).toFixed(2);
    list.appendChild(document.createTextNode("Size - " + selectSizes[y] + " : $" + selectedValue));
    sel.appendChild(list);
}

// 先将元素挂载到DOM，再获取值
div1.appendChild(sel);
alert(document.getElementById("select"+x).value);

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