Add Dynamic Attribute Title to the Query Returned In Sub Select

Question

I'm trying to add the attribute, Title, to the Option tag returned in a dynamically generated query in this jQuery function. This is a sub-Select that gets populated from another Select element on the Form. The variable for the Title attribute is #SystemDescription# and it already exists in the query called from the function in the Component.

Example of what it is currently:

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

Example of what I need it to be:

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

How do I add it to this currently working jQuery function:

$('#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
}); 

Answer 1

Yes, it can be done and was. I got the answer elsewhere. Although I was half way there with adding it to the query in the function and trying to alter the attribute. Look at the line that has the .attr. Notice the other attribute is chained to the existing attribute. Within the 2 parenthesis. Also, there are no pound signs with the variable like there usually is in Coldfusion. That's why and where I was stuck on the jQuery syntax nonsense.

$('#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.DATA, function(key, value) {
                $('#systemid').append($(`<option></option>`)
                .attr("value", value["SystemID"]).text(value["System"]).attr("title",value["SystemDescription"]));
            });         
        },//success
        error: function(jqXHR, textStatus, errorThrown) {
            $.error(errorThrown);
        }//error
    });//ajax
}); 

$('#cancelButton').on('click', function(e){
    e.preventDefault();
    location.href = 'sordsDashboard.cfm';
});