选择为远程数据填充的选项设置默认值 - selectize set default value for select populated by remote data

selectize set default value for select populated by remote data

在之前的回答中提供的所有其他类似的相关解决方案都不适合我，所以请您协助?

简单地说:

创建页面:从下拉菜单中选择选项。ID保存到DB

编辑页:下拉框必须默认使用DB的ID选项

代码:

$("#vehicle_id").selectize({
    valueField: "id",
    labelField: "vehicle_model",
    searchField: "vehicle_model",
    options: [],
    create: false,
    render: {
        option: function(item, escape) {
            return "<div>" +
                        "<span class=title>" +
                            "<span class=renderline1><b>" + escape(item.vehicle_model) + "</b></span>" +
                            "<span class=renderline2>" + escape(item.vehicle_derivative) + "</span>" +
                        "</span>" +
                    "</div>";
        }
    },
    load: function(query, callback) {
        if (!query.length) return callback();
        $.ajax({
            url: "ajax.php",
            type: "post",
            dataType: "json",
            data: {
                a: "search",
                term: query
            },
            error: function() {
                callback();
            },
            success: function(res) {
                callback(res);
            }
        });
    }
});
$("#vehicle_id")[0].selectize.setValue(165);

ajax.php回报:

[{"id":"165","vehicle_model":"KIA","vehicle_derivative":"Cerato"},{"id":"786","vehicle_model":"KIA","vehicle_derivative":"Rio"}]

问题1:为什么setValue不工作?我明白，这会根据远程数据填充选项。当然，setValue不起作用，因为在页面加载时，没有选项可以开始。所以我需要先添加选项吗?但是，这不会与ajax返回的实际选项混淆吗?这很令人困惑:/

问题2:您会注意到，json为每辆车返回3个条目，分别是ID、模型、衍生品。当一个项目被选中时，我如何设置labelField来同时显示模型/衍生品，以同样的方式呈现

答案1:我认为你应该设置值只有当你有一些选项。您可以在从服务器返回一些选项后设置值。

答案2:在render对象中使用item函数，就像使用option一样

将是这样的:

...
render: {
    option: function (item, escape) { ... },
    item: function (item, escape) {
        return "<div>" +
                    "<span class=title>" +
                        "<span class=renderline1><b>" + escape(item.vehicle_model) + "</b></span>" +
                        "<span class=renderline2>" + escape(item.vehicle_derivative) + "</span>" +
                    "</span>" +
                "</div>";
    }
}