为何不符合条件时Option()构造函数仍生成空<option>？

问题现象 #

遍历后端返回的选项列表时，已通过判断跳过值为some_string或空字符串的元素，但<select>中仍生成对应顺序的空选项，控制台的判断逻辑输出正确，但最终HTML里出现了空的<option>标签。

根本原因 #

你用selectElement[key] = new Option(...)的方式赋值时，key会被当作<select>元素options集合的索引值处理。比如处理key=2（对应合法选项）时，设置selectElement[2]会强制让options集合的长度变为3（索引从0开始），此时索引1的位置会被自动填充一个空的option；同理处理key=3时，会自动填充索引3的位置为空option，最终就出现了和原列表顺序对应的空选项。

直白说：直接通过索引赋值会自动补全中间缺失的索引位置，生成空option，不受你跳过某些key的逻辑影响。

修复代码 #

不要用索引赋值，改用add()方法或者appendChild()添加符合条件的option：

const optionsList = {
    "1" : {value: 'some_string'},
    "2" : {value: 'some_val_1'},
    "3" : {value: 'some_val_2'},
    "4" : {value: ''}
}

const selectElement = document.getElementById("my_select");

Object.keys(optionsList).forEach(key => {
    const itemValue = optionsList[key]['value'];
    if (itemValue === "some_string" || itemValue === ""){
        console.log("empty or some_string");
    } else {
        console.log(itemValue);
        // 使用add方法添加option，不会自动补空
        selectElement.add(new Option(itemValue, key));
        // 也可以用appendChild实现相同效果
        // selectElement.appendChild(new Option(itemValue, key));
    }
});

这样处理后，<select>里只会生成两个合法的option，不会出现空选项。

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