我无法从通过 Ajax 创建的选择元素中设置值或获取值

Posted 2023-05-08

【中文标题】我无法从通过 Ajax 创建的选择元素中设置值或获取值

【英文标题】：I can't set value or get value from select elements created via Ajax

【发布时间】：2016-08-26 10:44:21

【问题描述】：

我创建了“omarkasec”作为一个函数，我通过 ajax 从数据库中获取汽车品牌，并通过 ajax 在选择元素中添加了这个汽车品牌作为选项 --> 成功。 但我无法为这个选择元素设置值。

我试过这个代码来设置值：

$('select[name=marka]').val('Lada'); $('select[name=marka] option[value=Lada]').prop('selected', true); $('select[name=marka] option[value=Lada]').attr('selected', 'selected');

此代码不起作用。但是如果我添加 alert("");在“omarkasec”函数中，代码确实有效，如果我删除警报（“”）；代码不起作用。

<div id="marka" class="gizle" >
   Marka: <br>
   <select name="marka" onchange="omodelsec()" size="10" ></select>
</div>

<script language='javascript' type='text/javascript'>
    function omarkasec() 
        $.ajax(
            type: "POST",
            url: "aracsor.php",
            dataType: "json",
            data: 
                otomobilmodelyili : $("select[name=modelyili]").val(), //This work, because i created php.
            ,
            success: function(donen)
                $("#marka").removeClass("gizle");
                $("#model").addClass("gizle");
                $("#yakit").addClass("gizle");
                $("#sanziman").addClass("gizle");
                $("#cekis").addClass("gizle");
                $("#kasatipi").addClass("gizle");
                $("select[name=marka]").empty();
                $.each(donen, function (index, otomarka) 
                    $("select[name=marka]").append($("<option>", 
                        text : otomarka,
                        value  : otomarka,
                    ));
                );
            ,
        );
     //if I add here alert(""); The following code works.
    
    </script>

<script language='javascript' type='text/javascript'>
   omarkasec();
   $('select[name=marka]').val('Lada');
   alert($('select[name=marka]').val()); //if I add alert(""); this code work but if I remove alert(""); this code get null value.
</script>

【问题讨论】：

尝试将您的代码放在$( document ).ready(function() //put code here ); 之间您需要等待文档加载，然后才能找到元素和设置值

【参考方案1】：

Ajax 调用是异步的。您的代码执行了 $.ajax() 调用，并传递了一个回调函数，但该回调函数此时并未执行。

立即执行$.ajax() 之后的语句，但此时内容尚未加载。

但是，如果您执行alert()，则最终可能会在警报对话框打开时触发回调，因此您的回调函数会加载内容。如果你随后关闭弹出窗口，任何跟随它的代码都会发现内容在那里。

解决这个问题的一种方法是使用$.ajax 调用的返回值，这是一个承诺，并将then 调用链接到它：

function omarkasec(oncomplete) 
    return $.ajax(
//  ^^^^^^
        type: "POST",
        url: "aracsor.php",
        dataType: "json",
        data: 
            otomobilmodelyili : $("select[name=modelyili]").val(),
        ,
        success: function(donen)
            $("#marka").removeClass("gizle");
            $("#model").addClass("gizle");
            $("#yakit").addClass("gizle");
            $("#sanziman").addClass("gizle");
            $("#cekis").addClass("gizle");
            $("#kasatipi").addClass("gizle");
            $("select[name=marka]").empty();
            $.each(donen, function (index, otomarka) 
                $("select[name=marka]").append($("<option>", 
                    text : otomarka,
                    value  : otomarka,
                ));
            );
        ,
    );


// provide (anonymous) callback function to the `then` method: 
omarkasec.then(function () 
     // this code will only be executed when content is loaded:
     $('select[name=marka]').val('Lada');
     alert($('select[name=marka]').val());
);

【讨论】：

感谢 noderman 和 trincot。以下代码解决了我的问题。 omarkasec(function () // this code will only be executed when content is loaded: $('select[name=marka]').val('Lada'); alert($('select[name=marka]').val()); );

你的回答拯救了我的一天。谢谢！

【参考方案2】：

你有一个竞争条件。您正在调用 omarkasec() 而不是等待它完成执行 select.val() 操作。当您添加警报时，它“起作用”，因为它为代码提供了一些额外的时间来完成 ajax 调用并填充值。当你提醒它时，这些值已经被填充了。

所有依赖于 ajax 调用结果的代码都必须在成功回调中。

【讨论】：

是的竞争条件 - 我最近发布了一个类似的问题。也许这里的简化示例将清楚地说明竞争条件？ ***.com/questions/36949904/…