使用 jQuery 动态生成 元素时，若通过字符串方式传入 selected 属性（如 ""），会与 jQuery 通过对象参数设置的 value 和 text 冲突，导致选项文本显示为空；应统一使用属性对象中的 selected: boolean 控制选中状态。

使用 jquery 动态生成 `` 元素时，若通过字符串方式传入 `selected` 属性（如 `""`），会与 jquery 通过对象参数设置的 `value` 和 `text` 冲突，导致选项文本显示为空；应统一使用属性对象中的 `selected: boolean` 控制选中状态。

在 jQuery 中，动态构建 的 元素时，避免混合使用 HTML 字符串语法与属性对象语法。原代码中：

$("<option selected>", { value: ..., text: ... })

这种写法看似简洁，实则存在关键问题：jQuery 在解析 "" 字符串时，会优先按 HTML 原生语义解析该标签，并可能忽略后续对象中传入的 text 属性（尤其在某些 jQuery 版本或 DOM 渲染上下文中），最终导致 节点内容为空（即 ），尽管其 value 正确且 selected 状态生效，但用户看到的是空白选项。

✅ 正确做法是：完全通过属性对象声明所有字段，包括 selected，让 jQuery 统一处理 DOM 属性与文本内容：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

const sortedData = result.data.sort();
for (let i = 0; i < sortedData.length; i++) {
  const isSelected = sortedData[i] === userCountry;
  $("#country-selector").append(
    $("<option>", {
      value: sortedData[i],
      text: sortedData[i],
      selected: isSelected // 布尔值：true 或 false，非字符串 "selected"
    })
  );
}

? 关键要点：

• selected 必须为布尔值（true/false），而非字符串 "selected" 或空字符串；
• 所有属性（value、text、selected）应在同一对象中声明，确保 jQuery 内部一致渲染；
• 使用 text 属性而非 html，可防止 XSS 风险，且更符合纯文本国家名场景；
• 推荐用 let 替代 var，避免变量提升引发的潜在作用域问题。

? 补充建议：
若需提升性能（尤其数据量大时），可先构建文档片段再一次性追加，减少重排重绘：

const $fragment = $(document.createDocumentFragment());
sortedData.forEach(country => {
  $fragment.append(
    $("<option>", {
      value: country,
      text: country,
      selected: country === userCountry
    })
  );
});
$("#country-selector").append($fragment);

这样既保证逻辑清晰、兼容性强，又兼顾可维护性与运行效率。