JS动态创建select修改selectedIndex无效、id未显示问题

你的代码存在逻辑顺序错误，直接导致选中项设置失效、id看起来没有写入DOM：

• createElement创建的元素初始仅存在于内存中，只有将元素逐层挂载到已在页面DOM树内的父节点下之后，它才会出现在可被document.getElementById检索、可在开发者工具Elements面板看到的DOM结构里。你执行document.getElementById("selectID").selectedIndex = "3"时，还没执行元素挂载操作，此时DOM里根本没有对应id的节点，getElementById会返回null，这行代码会直接抛出类型错误中断执行，后续的挂载操作虽然会把select加到页面上，但设置选中项的逻辑根本没跑通。
• 你完全没必要通过id查询刚创建的元素：代码里已经把新建的select存在vendor_dropdown变量中，直接操作这个变量即可，不需要等元素挂载后再去DOM里检索。
• 细节注意：selectedIndex接收数值类型参数，传字符串虽然会被大部分浏览器隐式转换，但不符合规范；另外选项索引从0开始计数，要确保下拉框内选项数大于3，否则索引3会超出有效范围，设置不生效。
• 你观察到的id未出现在DOM中的问题，本质是你检查DOM时元素还没完成挂载，不是setAttribute失效，只要挂载逻辑正常执行，元素进入DOM树后id属性是正常存在的。

const vendor_cell = document.createElement("td");
const vendor_dropdown = document.createElement("select");
// 直接用id属性赋值即可，不需要调用setAttribute
// 注意：如果多次执行这段逻辑生成下拉框，固定id会出现重复，违反HTML规范，建议按需生成动态id
vendor_dropdown.id = "selectID";

for (const vendorID in vendors) {
    const option = document.createElement("option");
    option.value = vendorID;
    option.textContent = vendors[vendorID];
    vendor_dropdown.append(option);
}

// 直接通过已有的元素引用设置选中项，无需等待DOM挂载
// 加长度判断避免索引越界
if (vendor_dropdown.options.length > 3) {
    vendor_dropdown.selectedIndex = 3;
}

vendor_cell.append(vendor_dropdown);
row.append(vendor_cell);
// 请确保row本身已经被挂载到页面已存在的表格节点下，否则整行内容都不会出现在DOM中

如果你坚持要在元素挂载后再设置选中项，必须把设置逻辑放到所有append操作完成、且row已经被加入页面现有DOM结构之后执行，否则依然会找不到对应节点。

内容的提问来源于stack exchange，提问作者Asfand Salam Alavi