使用 AJAX 构建选择选项后选择项目时出现问题答案

【问题标题】：Problem selecting an item after building the select options with AJAX使用 AJAX 构建选择选项后选择项目时出现问题
【发布时间】：2022-07-18 01:54:14
【问题描述】：

我使用这个 javascript 来选择一个特定的选项（在隐藏元素中指定的选项值）：

$("select").each(function() {
    var id = $(this).attr('id');
    var source = 'input:hidden[name=select_'+id+']';
    if ($(source).length) {
        var selected = $(source).val();
        $(this).val(selected).change();
    }
});

在HTML源中硬编码选项时，此功能正常。

我现在需要使用 AJAX 调用填充选项，我使用以下方法：

select : function(ctrl,id) {
    var call = '/'+ctrl+'/'+$("#auth input[name=verify]").val();
    $.getJSON(call, function(result) {
        $.each(result, function() {
            $('#'+id).append($("<option />").val(this.id).text(this.title));
        });
    });
},

我在页面加载时处理选择方法 (AJAX)，并且选项填充得很好。但是当我尝试选择所需的选项时，浏览器默认为第一个选项。

我已经通过在代码周围粘贴一些警报来测试正在发生的事情，如下所示：

    alert($(this).val(selected));       // A
    alert($(this).val());               // B
    $(this).val(selected).change();
    alert($(this).val());               // C

When the options are hard coded I get A=3, B=null, C=3 i.e. it works 当通过 AJAX 填充选项时，我得到 A=3，B=null，C=null，即它失败了

我猜我需要在使用 AJAX 填充选项列表后触发某种 change() 事件。我试过了（我知道有点矫枉过正）：

$('#'+id).append($("<option />").val(this.id).text(this.title).change());

$('#'+id).append($("<option />").val(this.id).text(this.title)).change();

有什么想法吗？谢谢

【问题讨论】：

标签： javascript jquery ajax html-select

【解决方案1】：

问题解决了。

虽然我以正确的顺序（理论上）触发了代码，但由于 javascripts 事件驱动的行为，AJAX 调用直到我的选择初始化完成后才完成。所以我移动了代码以将所选选项设置为 AJAX 调用，瞧。

select : function(ctrl,id) {
var call = '/'+ctrl+'/'+$("#auth input[name=verify]").val();
$.getJSON(call, function(result) {
    $.each(result, function() {
        $('#'+id).append($("<option />").val(this.id).text(this.title));
    });
    var source = 'input:hidden[name=select_'+id+']';
    if ($(source).length) {
        var selected = $(source).val();
        $('#'+id).val(selected).change();
    }
});

【讨论】：