本文详解如何在使用 jquery 动态向 `
在 jQuery 中动态构建 <option> 元素时，若希望每个选项携带语义化提示（如鼠标悬停显示键名），应在创建元素阶段即绑定 title 属性，而非在循环外统一操作子元素——后者极易因闭包或异步执行问题导致所有 <option> 共享最后一次迭代的 val 值。
正确的做法是：在 $.each() 迭代字典时，直接通过链式调用 .attr('title', val) 将当前键名设为新创建 <option> 的 title 属性。注意 jQuery 的 $.each(obj, callback) 中，第一个参数是 key（即字典键），第二个参数才是 value（即字典值）——这与数组遍历顺序相反，需特别留意。
以下是优化后的完整代码示例：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
function addOptions() {
var dict = {
key1: "val1",
key2: "val2",
key3: "val3",
key4: "val4"
};
// 清空已有选项（可选，避免重复添加）
$('#mySelect').empty().append('<option value="select">--Select--</option>');
$.each(dict, function(key, value) {
$('<option></option>')
.val(key) // 设置 value 为键名（如 key1）
.text(value) // 设置显示文本为值（如 val1）
.attr('title', key) // 关键：立即绑定 title = 键名
.appendTo('#mySelect'); // 推荐使用 appendTo 提升性能
});
}⚠️ 注意事项：
- 参数顺序勿颠倒：$.each(dict, function(key, value){...}) 中 key 是字典键（即你想要的 title 内容），不可误写为 function(value, key)；
- 避免后期批量赋值：像 $('#mySelect option').attr('title', key) 这类写法在循环外执行会失败，因为 key 已超出作用域或被覆盖；
- 性能建议：使用 .appendTo() 替代 .append() 可减少 DOM 重排次数；
- 可访问性增强：title 属性虽能提供基础提示，但对屏幕阅读器支持有限；如需更健壮的无障碍体验，建议结合 aria-label 或 <optgroup> 结构化组织。
通过此方式，每个 <option> 不仅拥有正确的 value 和显示文本，还具备唯一、准确的 title 提示，显著提升交互友好性与调试可维护性。
