Question

我有以下ajax函数，它可以动态地将选项添加到下拉列表中。

var getData = function() {

    $.getJSON('api/someurl')
            .done(function (data) {

                console.log(data);


                var results = $("#Mydropdown")
                              .empty()
                              .append("<option value=''>Please select</option>");

               // loop data and build list
            })
            .fail(function (jqXHR, textStatus, err) {

            });
};

如果我已经在某个输入字段中选择了一个值，那么在页面加载时我想重新创建列表并将所选选项设置为之前选择的选项。

以下不起作用。在控制台中，我可以看到在此行执行$('#Mydropdown').val($("#SelectedVal").val());后返回ajax数据，因此该值未被选中？

if ($("#SelectedVal").val()) {
    getData(); // this function logs to console too
    $('#Mydropdown').val($("#SelectedVal").val());
    console.log('done');
}

我该如何解决？

*注意* 我也在其他函数中调用getData函数，这就是为什么我不在函数中传递上述场景中的选定值。

Answer 1

您需要在更新成功回调中的下拉列表后设置所选值：

Add the below line inside <head>
<meta name="csrf-token" content="{{ csrf_token() }}">

And add the below lines before your ajax call in javascript function
$.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
});

And don't forget to give permission to your storage folder
sudo chmod -R 777 storage

然后：

var selectedValue = $("#SelectedVal").val();
if (selectedValue) {
    getData(selectedValue);
}

或者，如果您不想在var getData = function(selectedValue) { $.getJSON('api/someurl').done(function (data) { var results = $("#Mydropdown") .empty() .append("<option value=''>Please select</option>"); // loop data and build list // after you have built the new list set the selected value // to what it previously was $('#Mydropdown').val(selectedValue); }) .fail(function (jqXHR, textStatus, err) { }); };函数中设置所选值，则可以使用回调：

getData

并且您的var selectedValue = $("#SelectedVal").val(); if (selectedValue) { getData(function() { $("#SelectedVal").val(selectedValue); }); }函数可能如下所示：

getData

Answer 2

你应该在getdata成功回调中选择值：请参阅附件中的代码：

       $.getJSON('api/someurl')
        .done(function (data) {


            var results = $("#Mydropdown")
                          .empty()
                          .append("<option value=''>Please select</option>");

           // loop data and build list
           //After List Build is Completed Select Drop Down Here

            $('#Mydropdown').val($("#SelectedVal").val());

            console.log('done');

        })
        .fail(function (jqXHR, textStatus, err) {

        });

Answer 3

例如，可以使用doneCallback函数;

使用回调

var getData = function(doneCallback) {

    $.getJSON('api/someurl')
            .done(function (data) {

                console.log(data);


                var results = $("#Mydropdown")
                              .empty()
                              .append("<option value=''>Please select</option>");

               // loop data and build list
               if(doneCallback)
                doneCallback();
            })
            .fail(function (jqXHR, textStatus, err) {

            });
};

定义回调

if ($("#SelectedVal").val()) {
    getData(function(){
        $('#Mydropdown').val($("#SelectedVal").val());
    });
    console.log('done');
}

JQuery - Ajax调用在下一行代码之后完成

3 个答案: