如何为动态生成的子Select的Option标签添加Title属性

我需要在现有jQuery函数中，给动态生成的子Select标签里的Option元素加上Title属性。这个子Select会根据表单里另一个Select的内容动态填充，Title对应的变量#SystemDescription#已经存在于组件调用的查询中。

当前生成的Option代码：

<option value="#systemid#">#system#</option>

期望生成的Option代码：

<option value="#systemid#" title="#SystemDescription#">#system#</option>

原可正常运行的jQuery代码 #

$('#orderpdm').on('change', function() {
    $.ajax({
        type: 'POST',
        url: '<cfoutput>#Application.URL#/#Application.directory#</cfoutput>/cfc/order.cfc?method=GetSystemListSelect',
        data: {PdMID: this.options[this.selectedIndex].value},
        async: true,
        cache: false,
        dataType: 'json',
        type: 'POST',
        success: function(rtnData) {
            $("#orderpdm option:first-child").attr("disabled", "true");
            $('#systemid').empty();
            $('#systemid').append($("<option value='' selected>-- Select Sub-System --</option>"));
            $.each(rtnData.SELECTLIST, function(key, value) {
                $('#systemid').append($("<option></option>")
                .attr("value", value).text(key));
            });         
        },//success
        error: function(jqXHR, textStatus, errorThrown) {
            $.error(errorThrown);
        }//error
    });//ajax
}); 

修改步骤及代码 #

要实现需求，需要同时调整后端返回的数据结构和前端的循环逻辑：

1. 后端调整
   让GetSystemListSelect方法返回的rtnData.SELECTLIST不再是简单的键值对，而是包含三个属性的对象数组，每个对象结构如下：

{
    "text": "#system#",
    "value": "#systemid#",
    "title": "#SystemDescription#"
}

2. 前端修改
   把原代码中的$.each循环部分替换，改为读取对象的title属性并设置给Option：

修改后的完整代码：

$('#orderpdm').on('change', function() {
    $.ajax({
        type: 'POST',
        url: '<cfoutput>#Application.URL#/#Application.directory#</cfoutput>/cfc/order.cfc?method=GetSystemListSelect',
        data: {PdMID: this.options[this.selectedIndex].value},
        async: true,
        cache: false,
        dataType: 'json',
        success: function(rtnData) {
            $("#orderpdm option:first-child").attr("disabled", "true");
            $('#systemid').empty();
            $('#systemid').append($("<option value='' selected>-- Select Sub-System --</option>"));
            // 遍历对象数组，设置每个Option的value、title和显示文本
            $.each(rtnData.SELECTLIST, function(index, item) {
                $('#systemid').append($("<option></option>")
                    .attr("value", item.value)
                    .attr("title", item.title) // 新增Title属性设置
                    .text(item.text));
            });         
        },//success
        error: function(jqXHR, textStatus, errorThrown) {
            $.error(errorThrown);
        }//error
    });//ajax
}); 

关键说明 #

• 后端必须返回包含title属性的对象数组，否则前端拿不到#SystemDescription#的值；
• 前端循环时，把原来的key和value参数换成数组索引index和当前对象item，再通过item的属性来设置Option的对应内容。

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