使用 jQuery 动态生成 元素时，若通过字符串方式传入 selected 属性（如 ""），会导致浏览器解析异常，使选项文本显示为空；应统一通过属性对象参数设置 selected: true/false 才能确保文本正常渲染且选中状态准确。

使用 jquery 动态生成 `` 元素时，若通过字符串方式传入 `selected` 属性（如 `""`），会导致浏览器解析异常，使选项文本显示为空；应统一通过属性对象参数设置 `selected: true/false` 才能确保文本正常渲染且选中状态准确。

在实际开发中，我们常通过 AJAX 获取国家列表，并动态填充 下拉框，同时将用户当前国家设为默认选中项。但如示例代码所示，若采用 $("", {...}) 这种混合写法——即在 HTML 字符串中声明 selected，又在属性对象中传入 value 和 text——jQuery 内部解析逻辑会冲突：selected 作为 HTML 字符串的一部分被提前解析，而后续属性对象中的 value/text 可能被覆盖或忽略，最终导致 节点内容为空（尽管 DOM 中 selected 属性存在，且 selectedIndex 正确），视觉上仅显示空白选项。

✅ 正确做法是完全放弃在标签字符串中硬编码属性，全部通过属性对象（properties object）统一声明：

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

该写法确保：

jQuery 1.12.4

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

下载

• value 和 text 均被正确赋值，选项内容可见；
• selected 作为标准 DOM 属性被可靠设置（等价于 option.selected = true），而非依赖 HTML 字符串解析；
• 语义清晰、可维护性强，且兼容所有现代浏览器及 jQuery 版本（1.6+）。

⚠️ 注意事项：

• 避免混用字符串模板与属性对象（如 "" + {text: ...}），这是问题根源；
• 若需批量追加以提升性能，可先构建 DocumentFragment 或字符串拼接后再一次性 .html()，但需注意 XSS 风险，推荐仍优先使用 $("") 方式；
• 确保 userCountry 值与 sortedData 中元素严格相等（===），注意空格、大小写、Unicode 归一化等问题；
• 初始化前建议清空原 ：$("#country-selector").empty()，防止重复渲染。

总结：jQuery 的 $("", props) 构造函数设计初衷即是以 JavaScript 对象方式安全创建元素，任何在标签字符串中嵌入属性的行为都可能破坏其内部属性合并逻辑。坚持“全属性对象驱动”，即可规避此类渲染异常，让动态下拉框既功能正确，又界面完整。