动态创建select元素并设置选中项失效问题排查

我通过代码动态创建包含多个选项的select元素，想要把特定选项设为选中状态，先后试了option.selected = true和option.selected = 'selected'两种写法，但都没达到预期效果。以下是我的代码、实际输出和期望输出，求帮忙排查问题：

我的代码 #

let select_menu_for_sequence = document.createElement("select");
select_menu_for_sequence.classList.add("sequence");

for (i = 1; i <= 4; i++) {
    let option = document.createElement("option");
    option.text = i;

    if (i == 2) {
        option.selected = true;
    }

    select_menu_for_sequence.appendChild(option);
}

console.log(select_menu_for_sequence.outerHTML)

实际输出 #

<select class="sequence">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

期望输出 #

<select value="2" class="sequence">
    <option>1</option>
    <option selected>2</option>
    <option>3</option>
    <option>4</option>
</select>

问题原因与解决方法 #

其实option.selected = true的写法本身是有效的——DOM层面上该选项已经处于选中状态了，只是outerHTML在序列化DOM元素时，不会自动把这个状态转换成HTML属性。如果要让outerHTML显示出selected属性，你需要显式调用setAttribute方法：

修改代码中设置选中的部分：

if (i == 2) {
    option.selected = true;
    option.setAttribute('selected', 'selected');
    // 同时给select设置value，确保选中值同步
    select_menu_for_sequence.value = i.toString();
}

这样修改后，console.log输出的outerHTML就会和你的期望一致，同时select元素的选中状态也能正确生效。

内容的提问来源于stack exchange，提问作者O'Niel