Ajax回调将选择下拉HTML追加到表？

Question

I am trying to append some html using jQuery using below code. This whole thing i am just trying to select an option using ajax response data and building a select dropdown. But sOut variable scope not able to persist appended html inside callback function looping. Is there any work around to achieve what i am doing?

getVendor(aData[2], function (response) {
    var obj = jQuery.parseJSON(response);
    var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
    var industries_select = '<tr><td>Industry:</td><td><select class="form-control m-bot15">';

    getIndustries(function (response) {
        var industries = jQuery.parseJSON(response);
        for (var l = 0; l < industries.length; l++) {
            if (industries[l].id == obj.industry) {
                industries_select += '<option value="' + industries[l].id + '" selected="selected">' + industries[l].name + '</option>'
            } else {
                industries_select += '<option value="' + industries[l].id + '">' + industries[l].name + '</option>'
            }
        }
    });
    industries_select += '</select></td></tr>';
    sOut += industries_select;
    sOut += '</table>';
});

Answer 1

That's the expected behavior of async request. you should be doing something like this

getVendor(aData[2], function (response) {
    var obj = jQuery.parseJSON(response);
    var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
    var industries_select = '<tr><td>Industry:</td><td><select class="form-control m-bot15">';

    getIndustries(function (response) {
        var industries = jQuery.parseJSON(response);
        for (var l = 0; l < industries.length; l++) {
            if (industries[l].id == obj.industry) {
                industries_select += '<option value="' + industries[l].id + '" selected="selected">' + industries[l].name + '</option>'
            } else {
                industries_select += '<option value="' + industries[l].id + '">' + industries[l].name + '</option>'
            }
        }

        industries_select += '</select></td></tr>';
        sOut += industries_select;
        sOut += '</table>';
    });
});

Because, the callback of getIndustries will be called later point in time, and when the time you access industries_select outside the function, it's undefined.

Answer 2

If, for example, you're building the HTML dynamically then you may try appending the sOut variable to a Div tag inside your function scope, for example:

HTML:

<div id="dynamic"></div>

JQuery:

$("#dynamic").append(sOut);