如何在JavaScript或jQuery中設定從select2中的資料庫中獲取的值？

我有一個編輯表單，我試圖在其中使用 Ajax 從 MySql DB 獲取資料。所以當有兩個select2下拉選單時。我想在那個 select2 中顯示資料。例如：當我為特定公司創建了新的卡車和司機時（假設公司 ID 為 6）。因此，對于公司 ID 6，我選擇了司機作為約翰和卡車作為平板并提交了表格。資料保存在資料庫中。當我想編輯或更新其中的一些資料時，它應該顯示 ID 6 的公司名稱（顯示成功）和司機作為約翰和卡車作為平板。

下面是我的腳本：

function getTrip(tripid){
    document.getElementById('edtrip').value = tripid;
    var url = "api/gettripinfo";
    $.post(url,{
        tripid : tripid,
    },function(data, status){
        if (data.status == "OK") {
            if (data.statusCode == 1) {
                document.getElementById("edcompanyselect").value = data.response.company.companyname;
                document.getElementById("ed_com").value = data.response.company.companyid;
                document.getElementById('eddriverselect').value = data.response.driver.username;
                document.getElementById('edtruckselect').value = data.response.truck.name;
                document.getElementById("edtripnumber").value = data.response.tripnumber;
                document.getElementById("eddate").value = data.response.date;
                
            } else {
                var error = data.responseMessage;
                swal(error, "", "error");
            }
        } else {
            var error = data.responseMessage;
            swal(error, "", "error");
        }
    });
}

但我無法得到預期的結果。請向我提供您寶貴的建議。

uj5u.com熱心網友回復：

試試下面的代碼。使用jQuery您可以設定值并觸發change事件。

function getTrip(tripid){
    document.getElementById('edtrip').value = tripid;
    var url = "api/gettripinfo";
    $.post(url,{
        tripid : tripid,
    },function(data, status){
        if (data.status == "OK") {
            if (data.statusCode == 1) {
                document.getElementById("edcompanyselect").value = data.response.company.companyname;
                document.getElementById("ed_com").value = data.response.company.companyid;
                document.getElementById('eddriverselect').value = data.response.driver.username;
                document.getElementById('edtruckselect').value = data.response.truck.name;
                document.getElementById("edtripnumber").value = data.response.tripnumber;
                document.getElementById("eddate").value = data.response.date;

                jQuery("#edcompanyselect").val(data.response.company.companyname).trigger('change');
                jQuery("#eddriverselect").val(data.response.driver.username).trigger('change');
                jQuery("#edtruckselect").val(data.response.truck.name).trigger('change');

            } else {
                var error = data.responseMessage;
                swal(error, "", "error");
            }
        } else {
            var error = data.responseMessage;
            swal(error, "", "error");
        }
    });
}

uj5u.com熱心網友回復：

下面的代碼解決了這個問題：

function getTrip(tripid){
        document.getElementById('edtrip').value = tripid;
        var url = "api/gettripinfo";
        $.post(url,{
            tripid : tripid,
        },function(data, status){
            if (data.status == "OK") {
                if (data.statusCode == 1) {
                    document.getElementById("edcompanyselect").value = data.response.company.companyname;
                    document.getElementById("ed_com").value = data.response.company.companyid;
                    setTimeout(function(){
                        getDriverAjax();
                        getTruckAjax();
                    },500);
                    document.getElementById("edtripnumber").value = data.response.tripnumber;
                    document.getElementById("eddate").value = data.response.date;
                    setTimeout(function(){
                        $("#eddriverselect").val(data.response.driver.userid).trigger('change');
                        $("#edtruckselect").val(data.response.truck.truckid).trigger('change');
                        $('#edit_info').modal("show");
                    }, 1500);
                } else {
                    var error = data.responseMessage;
                    swal(error, "", "error");
                }
            } else {
                var error = data.responseMessage;
                swal(error, "", "error");
            }
        });
    }

標籤：javascript 查询 阿贾克斯 弹簧靴 jquery-select2

上一篇：在ASP.NETMVC中通過JQueryAJAX上傳檔案

下一篇：在用戶登錄頁面后添加路由