jquery函数在逻辑上不行

Question

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

   $("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 += '<option value="' + j[i].value + '">' + j[i].text + '</option>';
      }

    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 += '<option value="' + j[i].value + '">' + j[i].text + '</option>';
      }

    })).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 += '<option value="' + j[i].value + '">' + j[i].text + '</option>';
        }

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