jquery函数在逻辑上不行

奇怪的function行为。 我正在使用父函数，这里是相关部分：

$("select#" + prefix + "1_" + num).val(smart_cat_data['cat_lvl2_id']); Foundation.libs.forms.refresh_custom_select($("select#" + prefix + "1_" + num), true); console.log("initial value and change DONE"); $.when(populateDep.call($("select#" + prefix + "1_" + num)), console.log("loading dependent select DONE"), console.log("setting " + prefix + "2_" + num + " TO: " + smart_cat_data['cat_lvl3_id']) ).then(function(x){ $("#" + prefix + "2_" + num + " > option").each(function() { console.log(this.text + ' ' + this.value); }); $("select#" + prefix + "2_" + num).val(smart_cat_data['cat_lvl3_id']); Foundation.libs.forms.refresh_custom_select($("select#" + prefix + "2_" + num), true); console.log($("select#" + prefix + "2_" + num).val()); }); 

哪个叫：

 function populateDep(){ console.log('populateDep'); id_in_str = $(this).attr('id'); console.log('PROCESSING:' + id_in_str); var ctrl = id_in_str.slice(0,3); // the second param is POSITION not LENGTH! var this_select = parseInt(id_in_str.slice(3,4), 10); // the second param is POSITION not LENGTH! var row = id_in_str.slice(5); $.getJSON("/cat_dropdowns",{parent_id: $(this).val(), required: '1', ajax: 'true'}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '' + j[i].text + ''; } var next_select = ++this_select; $("select#" + ctrl + next_select + "_" + row).html(options); $("#" + ctrl + next_select + "_" + row + " > option").each(function() { console.log('populateDep: ' + this.text + ' ' + this.value); }); Foundation.libs.forms.refresh_custom_select($('#' + ctrl + next_select + "_" + row), true); Foundation.libs.forms.assemble(); console.log('this should be after the selects but before the end'); }); console.log('populateDep DONE'); } 

但由于某种原因，来自populateDep的console.logs在它声称完成后打印。 它正在弄乱我的选择选项，不允许我像我需要的那样自动选择。 这是新手吗？ 我错过了什么吗？ 我包括了一个萤火虫的图像，因为我认为这是最简单的。

更新了populateDep：

 function populateDep(){ console.log('populateDep'); id_in_str = $(this).attr('id'); console.log('PROCESSING:' + id_in_str); var ctrl = id_in_str.slice(0,3); // the second param is POSITION not LENGTH! var this_select = parseInt(id_in_str.slice(3,4), 10); // the second param is POSITION not LENGTH! var row = id_in_str.slice(5); $.when($.getJSON("/cat_dropdowns",{parent_id: $(this).val(), required: '1', ajax: 'true'}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '' + j[i].text + ''; } })).then(function(options){ console.log('starting then'); var next_select = ++this_select; $("select#" + ctrl + next_select + "_" + row).html(options); $("#" + ctrl + next_select + "_" + row + " > option").each(function() { console.log('populateDep: ' + this.text + ' ' + this.value); }); Foundation.libs.forms.refresh_custom_select($('#' + ctrl + next_select + "_" + row), true); Foundation.libs.forms.assemble(); console.log('this should be after the selects but before the end'); }); console.log('populateDep DONE'); } 

现在，似乎根本没有填充选择。 请注意$ .getJSON已经有一个回调，所以我对发生的事情感到很困惑。

Answer 1

正如我在评论中解释的那样，你的方法存在很多问题。

尝试

 $("select#" + prefix + "1_" + num).val(smart_cat_data['cat_lvl2_id']); Foundation.libs.forms.refresh_custom_select($("select#" + prefix + "1_" + num), true); console.log("initial value and change DONE"); populateDep.call($("select#" + prefix + "1_" + num)).done(function (x) { $("#" + prefix + "2_" + num + " > option").each(function () { console.log(this.text + ' ' + this.value); }); $("select#" + prefix + "2_" + num).val(smart_cat_data['cat_lvl3_id']); Foundation.libs.forms.refresh_custom_select($("select#" + prefix + "2_" + num), true); console.log($("select#" + prefix + "2_" + num).val()); }); function populateDep() { console.log('populateDep'); id_in_str = $(this).attr('id'); console.log('PROCESSING:' + id_in_str); var ctrl = id_in_str.slice(0, 3); // the second param is POSITION not LENGTH! var this_select = parseInt(id_in_str.slice(3, 4), 10); // the second param is POSITION not LENGTH! var row = id_in_str.slice(5); return $.getJSON("/cat_dropdowns", { parent_id: $(this).val(), required: '1', ajax: 'true' }, function (j) { var options = ''; for (var i = 0; i < j.length; i++) { options += '' + j[i].text + ''; } var next_select = ++this_select; $("select#" + ctrl + next_select + "_" + row).html(options); $("#" + ctrl + next_select + "_" + row + " > option").each(function () { console.log('populateDep: ' + this.text + ' ' + this.value); }); Foundation.libs.forms.refresh_custom_select($('#' + ctrl + next_select + "_" + row), true); Foundation.libs.forms.assemble(); console.log('this should be after the selects but before the end'); }); }