如何使用 jQuery 为动态生成的下拉选项设置 title 属性

本文讲解如何在 jquery 中遍历对象字面量并为每个动态创建的 `` 元素正确设置 `title` 属性，避免因作用域或 dom 更新时机导致所有选项共享同一 title 值的问题。

在使用 jQuery 动态向 元素添加 时，一个常见误区是：先批量追加选项，再统一设置 title 属性（例如通过 $('#mySelect').children('option').attr('title', val)）。由于 val 在循环结束后只保留最后一次迭代的值，所有 最终都会获得相同的 title —— 即对象最后一个键名。

正确的做法是在创建每个 元素的同时，就为其绑定对应的 title 属性。jQuery 链式调用使这一操作简洁高效：

function addOptions() {
    var dict = {
        key1: "val1",
        key2: "val2",
 
       key3: "val3",
        key4: "val4"
    };

    $.each(dict, function(key, text) {
        // 注意：$.each(object, callback) 的参数顺序是 (key, value)
        // 此处 key 是字典的键（如 "key1"），text 是对应的值（如 "val1"）
        $('#mySelect').append(
            $('')
                .val(key)           // 设置 value 属性为键名
                .text(text)         // 设置显示文本为键值
                .attr('title', key) // 同步设置 title 属性为键名
        );
    });
}

⚠️ 关键注意事项：

• $.each(dict, function(val, text) {...}) 中参数顺序易被误解：第一个参数是键（key），第二个是值（value）。原问题代码中误将 val 当作值、text 当作键，会导致 value 和 title 错位。务必按 function(key, value) 语义命名并使用。
• 不要试图在 .append() 之后再批量设置属性——这会丢失上下文关联；应将属性赋值嵌入元素构造过程。
• 若需兼容旧版 IE 或增强可读性，也可显式创建元素后链式设置：

  var $opt = $('').val(key).text(text);
  $opt.attr('title', key);
  $('#mySelect').append($opt);

最终效果：每个 的 value 和 title 均为字典键（如 key1），显示文本为对应值（如 val1），鼠标悬停时可看到准确提示信息，语义清晰且行为可靠。