使用 jQuery 动态生成 <option> 元素时，若通过 HTML 字符串方式传入 selected 属性（如 "<option selected>"），会与 jQuery 通过对象参数设置的 value/text 冲突，导致选项文本渲染为空，尽管值已被选中。正确做法是统一通过属性对象设置 selected: true/false。

使用 jquery 动态生成 `` 元素时，若通过 html 字符串方式传入 `selected` 属性（如 `""`），会与 jquery 通过对象参数设置的 `value`/`text` 冲突，导致选项文本渲染为空，尽管值已被选中。正确做法是统一通过属性对象设置 `selected: true/false`。

在实际开发中，常见需求是：根据后端返回的国家列表动态填充 <select> 下拉框，并将当前用户所属国家设为默认选中项。但若采用如下写法：

$("#country-selector").append(
  $("<option selected>", {
    value: sortedData[i],
    text: sortedData[i],
  })
);

虽然语义上看似合理，但 jQuery 在解析 "<option selected>" 这一 HTML 字符串时，会优先按原生 DOM 解析逻辑处理该字符串，而忽略后续通过对象参数传入的 text 和 value——尤其在某些 jQuery 版本或浏览器环境中，这会导致 <option> 的 textContent 为空，仅保留 value，从而界面显示为空白项（尽管 selectedIndex 正确、value 可取）。

✅ 正确做法是完全放弃 HTML 字符串形式的标签构造，统一使用属性对象声明所有字段，包括 selected：

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 // 直接传布尔值，无需字符串或 'selected'
    })
  );
}

? 关键要点：

• selected 是布尔属性（boolean attribute），jQuery 接受 true/false 值，而非字符串 "selected"；
• 所有属性（value、text、selected）必须通过同一对象参数传入，确保 jQuery 内部一致初始化；
• 使用 let 替代 var 避免闭包问题（虽本例无影响，但属现代最佳实践）；
• 若需兼容旧版 jQuery（<3.0），可额外调用 .prop('selected', isSelected) 确保生效，但上述写法在 jQuery 1.6+ 中已完全可靠。

? 补充建议：
为提升性能，避免频繁 DOM 操作，推荐先构建完整 $options 集合再一次性追加：

const $options = sortedData.map(country => 
  $("<option>", {
    value: country,
    text: country,
    selected: country === userCountry
  })
);
$("#country-selector").empty().append($options);

这样既保证语义清晰、渲染正确，又减少重排重绘开销。