Selectize.js: 从数据库中预填充项目 selectize multiselect

Question

我已经广泛寻找有关如何执行此操作的示例。

我正在尝试使用 Selectize jQuery 插件将数据库中的项目预填充到 select 元素中。这个想法是用户之前 select 编辑了项目并来到此页面编辑或添加更多项目。

据我所知，您使用“items”选项填充了一个数组。我试图让它工作的成功率为零。

这是我的代码：

$('#nsn').selectize({
    persist: false,
    maxItems: null,
    valueField: 'id',
    labelField: 'name',
    searchField: ['nsn', 'part_name', 'id'],
    sortField: [
        {field: 'nsn', direction: 'asc'},
        {field: 'part_name', direction: 'asc'}
    ],
//"items" below should pre-populate select element 
    items: [
        {nsn: '2840-01-461-8833NZ', part_name: 'adfasdfasdf', id:'562'},
        {nsn: '1111-22-333-4444', part_name: 'afafdsdf', id:'902'},
    ],
    options: [
        {nsn: 'NA', part_name: 'F100 Variable Vane', id:'329'},
{nsn: 'N/A', part_name: 'F100 Variable Vane', id:'331'},
{nsn: '6685-01-281-6849AW', part_name: 'Generator Oil Temperature   Indicator', id:'672'},
{nsn: '6680-01-350-8049RK', part_name: 'Fuel Quantity Indicator', id:'391'},
{nsn: '6680-01-350-8048RK', part_name: 'Indicator, Liquid Quantity', id:'367'},
{nsn: '6680-01-224-7271RK', part_name: 'Fuel Quantity Indicator', id:'390'},
{nsn: '6680-00-220-4090RK', part_name: 'Fuel Quantity Indicator', id:'389'}
],
    render: {
        item: function (item, escape) {
            var name = formatName(item);
            return '<div>' +
            (item.nsn ? '<span class="name">' + escape(item.nsn) + '</span>, ' : '') +
            (item.part_name ? '<span class="email">' +    escape(item.part_name) + '</span>' : '') +
            '</div>';
        },
        option: function (item, escape) {
            var name = formatName(item);
            var label = name || item.nsn;
            var caption = name ? item.nsn : null;
            return '<div>' +
            '<span class="label">' + escape(label) + '</span>' +
            (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
            '</div>';
        }
    },
    create:false
});

因此，根据项目中的数组，两个项目应该已经 select 出现在 multiselect 中。其他一切都完美无缺。感谢任何帮助。

Answer 1

您可以使用 addItem(value, silent) 来 select 项目。

Answer 2

看看这个How to add item into selectize js automatically after document ready?

我正在使用独立库。其他接受的答案对我不起作用。

$(document).ready(function(){
   var selectize_element = $("#select-links")[0].selectize;
   selectize_element.addOption({
      text:'First Item',
      value: 'First Item'
   });
   selectize_element.refreshOptions() ;
   selectize_element.addItem('First Item');
});

Selectize.js: 从数据库中预填充项目 selectize multiselect

Selectize.js: Prepopulate items from database selectize multiselect

php

jquery

selectize.js