如何使用JavaScript创建HTML <select> 元素并设置稳定预选值

你遇到的预选值随机生效问题是两个错误共同导致的：

• 类型不匹配：DOM的value属性仅支持字符串类型，你给option.value赋值布尔值true/false时，会被自动隐式转换为字符串"true"/"false"。后续你直接传入布尔类型的trueOrFalse给select.value赋值时，部分场景下类型不匹配会导致无法命中对应option。
• 语法错误：你尝试使用opt1.selected = selected设置选中状态时，右侧的selected没有加引号，会被JS解析为变量。如果当前作用域内刚好存在值为true的selected变量，设置就生效；如果不存在该变量、或者变量值为false，设置就失效，两种情况随机出现，就表现为预选值生效状态不稳定。

下面是三种可直接使用的稳定实现： #

方案1：统一类型后赋值value #

全程使用字符串类型匹配，避免隐式转换问题

// elementName为字符串类型，trueOrFalse为布尔类型
let n = document.createElement("select");
n.id = elementName;
let opt1 = document.createElement("option");
opt1.value = "true";
opt1.innerHTML = "是"; // 可按需修改展示文本
let opt2 = document.createElement("option");
opt2.value = "false";
opt2.innerHTML = "否";
n.appendChild(opt1);
n.appendChild(opt2);
Form.appendChild(n);
// 赋值前把布尔值转为字符串匹配
n.value = String(trueOrFalse);

方案2：直接设置option的selected属性 #

不用操作select的value，直接给对应option的selected属性赋布尔值即可，语法要正确

// 放在appendChild之前之后都可以生效
if (trueOrFalse) {
  opt1.selected = true;
} else {
  opt2.selected = true;
}

方案3：创建Option时直接指定选中状态 #

用内置的Option构造函数简化代码，第四个参数就是选中状态配置

let n = document.createElement("select");
n.id = elementName;
// Option构造函数参数：展示文本、value值、默认选中、当前选中
let opt1 = new Option("是", "true", trueOrFalse, trueOrFalse);
let opt2 = new Option("否", "false", !trueOrFalse, !trueOrFalse);
n.appendChild(opt1);
n.appendChild(opt2);
Form.appendChild(n);

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