Я не могу установить значение или получить значение из выбранных элементов, созданных с помощью Ajax

Question

Я создал "omarkasec" как функцию, и я получаю автомобильные бренды из базы данных через ajax, и я добавил в элемент выбора эти автомобильные бренды в качестве опций через ajax -> success. Но я не могу установить значение этого элемента выбора.

Я пробовал это коды для заданного значения:

1. $ ('Выберите [имя = Marka]') VAL ('Лада').
2. $ ('select [name = marka] option [value = Lada]'). prop ('selected', true);
3. $ ('select [name = marka] option [value = Lada]'). attr ('selected', 'selected');

эти коды не работают. Но если я добавлю предупреждение (""); в функции "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 вызов, который является обещанием, и цепочка 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());
});

Answer 2

У вас есть состояние гонки. Вы вызываете omarkasec() и не ожидаете, пока он завершит выполнение действия select.val(). Когда вы добавляете предупреждение, оно "работает", потому что дает коду дополнительное время для завершения вызова ajax и заполнения значений. Когда вы предупреждаете об этом, значения уже заполнены.

Весь ваш код, который зависит от результата вызова ajax, должен быть внутри обратного вызова.