由jquery生成的Html代码无法访问

Question

我在调试以下代码时遇到了麻烦：

演示

如果我运行以下代码：

$.get('/api/Customer/1', function(data){
    projects = data.data.projects;
    var $el = $('#mySelect');
    $el.empty();
    projects.forEach(function(element, index, array){
        var text = element.name;
        addSelectOption("mySelect", element.idProject, text);
    });
});

/**
 * Function which add an option to the select input which id is idSelect.
 */
function addSelectOption(idSelect, value, text)
{
    var option =
            $('<option></option>').attr("value", value).text(text);
    $('#' + idSelect).append(option);
}

我的选择将如下所示：

<select id="mySelect">
    <option value="1">proj1</option>
    <option value="2">proj2</option>
    <option value="3">proj3</option>
    <option value="4">proj4</option>
</select>

失败

所以，如果我在ajax代码之后附加以下行：

$('#mySelect').val("2");

我的选择应该显示proj2。但事实并非如此。

成功

我发现使其工作的唯一方法是以下代码：

$.get('/api/Customer/1', function(data){
    projects = data.data.projects;
    var $el = $('#mySelect');
    $el.empty();
    projects.forEach(function(element, index, array){
        var text = element.name;
        addSelectOption("mySelect", element.idProject, text);
    });
    $('#mySelect').val("2");//the only change between the presentation code
});

看起来jquery生成的html有一个范围是get ajax请求。

问题

我不明白为什么第一个代码无法将mySelect的选定值设置为proj2。你能解释一下吗？

Answer 1

这是因为ajax请求是异步的。当您要求val（）函数进行设置时，不会创建值为2的选项。当你把它放入ajax时，回调选项可用且设置正确。

Answer 2

除了@SSA所说的，以下是使用回调解决问题的方法：

$.get('/api/Customer/1', function(data){
    projects = data.data.projects;
    var $el = $('#mySelect');
    $el.empty();
    projects.forEach(function(element, index, array){
        var text = element.name;
        addSelectOption("mySelect", element.idProject, text);
    });
}).done(function(){ // <- Called when the $.get is completed
    $('#mySelect').val("2");
});

或者你可以在$.get成功回调中与其他代码一起进行操作。