selectize.js 动态添加选项来选择

Question

我正在尝试使用 selectize.js 库。在 document.ready 上，我进行了 ajax 调用并获取了要添加到选择列表中的选项。

这是选择标签的html

<select id="select-country-field" name="country-field-list[]" multiple   class="demo-default" style="width:50%" placeholder="Select a state...">
   <option value="">Select ...</option>
</select>

这是我在 $(document).ready 上添加选项的方法

var $select = $(document.getElementById('select-country-field')).selectize(options);
var selectize = $select[0].selectize;
selectize.addOption({value:1,text:'foo'});
selectize.addItem(1);
selectize.refreshOptions();

我看了下面的问题，但没有让它工作 Selectize.js 手动添加一些项目

有什么帮助吗？

Answer 1

您可以将 ajax 调用移动到 selectize load 方法中，如下所示：

$('#select-country-field').selectize({
  valueField: 'country',
  labelField: 'country',
  searchField: 'country',
  options: [],
  load: function(query, callback) {
    if (!query.length) return callback();
    $.ajax({
        url: 'http:// ajax-call-url',
        type: 'GET',
        dataType: 'json',
        data: {
            country: query,
        },
        error: function() {
            callback();
        },
        success: function(res) {
            callback(res);
        }
    });
  }
});

'http://ajax-call-url' 应该返回这样的数组：

[{ country: 'USA'}, {country: 'GB'}, {country: 'FR'}, ... ]