如何用jQuery为字典生成的select选项设置对应key的title属性？

我正在用jQuery从字典中向select标签添加选项，希望每个选项的title属性对应字典的key，但尝试的方法导致所有选项的title都被设为最后一个key。

原jQuery代码：

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

    $.each(dict, function(val, text){
        $('#mySelect').append($('<option></option>').val(val).html(text));
        // 错误尝试：每次循环都会给所有option设置title，最终全部变成最后一个key
        // $('#mySelect').children('option').attr({"title":val});
    });
}

原HTML代码：

<div class="row" style="padding-top: 20px;">
    <div class="col-3">
        <select id="mySelect">
            <option value="select">--Select--</option>
        </select>
        <br><br>
        <button class="btn btn-sm btn-primary" type="button" id="add" onclick="addOptions()">Add
            Values in Dropdown
        </button>
    </div>
</div>

解决方案 #

问题出在你尝试批量修改所有option的title，循环执行时每次都会覆盖所有选项的title值，最终所有选项的title都会变成最后一次循环的key。正确的做法是在创建单个option元素时就直接设置对应的title属性，这样每个选项都能绑定自己对应的key：

修改后的jQuery代码：

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

    $.each(dict, function(key, text){
        // 创建option时直接设置val、html和title
        var option = $('<option></option>')
            .val(key)
            .html(text)
            .attr('title', key); // 这里直接给当前option设置对应的key作为title
        $('#mySelect').append(option);
    });
}

说明 #

• 在$.each循环中，第一个参数是字典的key，第二个是对应的value（原代码参数命名有混淆，修改后用key和text更清晰）
• 每次循环只创建并配置当前对应的option，设置好title后再添加到select中，这样每个选项的title都是独立对应的字典key，不会被后续循环覆盖

内容的提问来源于stack exchange，提问作者Armaan Brar