Ajax阻止设置jQuery选择值？ （Django管理员）

Question

我对我遇到的选择框的行为感到非常困惑。我在django admin的页面上有两个连续的select，表单（#id_form）然后是（#id_section）部分。如果表单未选择任何内容，则会禁用select部分。选择表单后，我使用ajax检索该表单的部分以显示在第二个select中。

我的Ajax / jQuery检索并显示正确的部分，但我无法更改选择。

$("#id_form").change(function () {
    var section = $('#id_section');
    section.prop('disabled', $.trim(this.value) === '');

    var eval_form_id = $(this).val();
    if (eval_form_id.length > 0) {
        $.getJSON("/section-filter/" + eval_form_id + "/", function (data) {
            $('#id_section option:not([value=""])').remove();
            $.each(data, function (index, value) {
                section.append($("<option />").val(value[0]).text(value[1]));
            });
        });
    }
    section.val("1");
}).change();

如果我注释掉Ajax部分（或者为表单选择了空选项），则选项＆＃34; 1＆＃34;被选中，但是当ajax调用发生时，它不是。当我在Chrome中使用调试器时，select中的值会在section.val("1")正确更改，但由于某种原因，它会恢复为jQuery末尾的空选项。

这是我不明白的：jQuery是否改变了ajax调用的值，但它在完成之前还原了值。帮助

Answer 1

AJAX调用是异步发生的，只有在它完成后才会调用你的回调函数，该函数用选项填充select。

所以发生以下情况：启动AJAX调用，然后更改select的值，然后AJAX调用结束，删除所有选项（包括选定的选项），并用新的选项填充选择。

您应该在section.val("1")行之后的回调函数中移动$.each。