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

Question

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

我尝试了以下代码来设置值:

1. $('select[name=marka]').val('拉达');
2. $('select[name=marka] option[value=Lada]').prop('selected', true);
3. $('select[name=marka] option[value=Lada]').attr('已选择', '已选择');

此代码不起作用。但是如果我添加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>

Answer 1

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

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

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

解决此问题的一种方法是使用 $.ajax 调用的返回值(这是一个 promise )，并将 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());
});