如何在 JavaScript 或 jQuery 中设置从 select2 内的数据库中获取的值？答案

【问题标题】：How to set value fetched from database inside select2 in JavaScript or jQuery?如何在 JavaScript 或 jQuery 中设置从 select2 内的数据库中获取的值？
【发布时间】：2021-10-22 07:13:15
【问题描述】：

我有一个编辑表单，我正在尝试使用 Ajax 从 MySql DB 获取数据。所以当有两个select2下拉菜单时。我想在该 select2 中显示数据。例如：当我为特定公司创建新的卡车和司机时（假设公司 ID 为 6）。因此，对于 ID 6 的公司，我选择了 Driver as John 和 Truck as Flatbed 并提交了表单。数据保存在数据库中。当我想编辑或更新其中的一些数据时，它应该显示 ID 6 的公司名称（显示成功），司机为 John，卡车为平板。

下面是我的脚本：

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");
        }
    });
}

但我无法获得预期的结果。请给我您宝贵的建议。

【问题讨论】：

您使用的是哪个版本的 select 2？
我用的是这个版本的Select2 4.1.0

标签： javascript jquery ajax spring-boot jquery-select2

【解决方案1】：

试试下面的代码。使用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");
        }
    });
}

【讨论】：

没用。
控制台是否出现任何错误？
不，我没有收到任何错误。

【解决方案2】：

下面的代码解决了这个问题：

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");
            }
        });
    }

【讨论】：