jquery - 向初始化的 selectize 元素添加新选项

Question

我正在尝试将解决方案复制到 this question但没有运气。我需要向已初始化的 selectize 添加一个新的选定选项可能已或尚未将其列为 <item> 的元素选项。我的代码:

<select class="form-control pickerSelectClass" id="countries"></select>
<button type="button" onclick="addFiji();">Add "Fiji"</button>

<script>
function addFiji(){
  var selectElement = $('#countries').eq(0);
  var selectize = selectElement.data('selectize');
  if (!!selectize) selectize.setValue("Fiji");
  alert('Nothing happens. How can we add Fiji?');
}

var countries = [{"name":""}, {"name":"Afghanistan"}, {"name":"Belgium"}, {"name":"China"},{"name":"Denmark"}, {"name":"Estonia"}, {"name":"Finland"}, {"name":"Greece"}];

$.ajax({
  url: '/echo/json/',
  type: 'POST',
  dataType: 'json',
  data: { json: JSON.stringify(countries) },
  error: function(err) { console.log(err); },
  success: function(options) {
    $('#countries').selectize({
    valueField: 'name',
    labelField: 'name',
    searchField: 'name',
    maxItems: 3,
    preload: true,
    options: options,
    create: false,
    });
    } 
});
</script>

参见jsfiddle1 (和 jsfiddle2 作为替代方法)。这些都没有任何效果。感谢您指出我出错的地方。

Answer 1

这有效(这里是 Fiddle ):

function addFiji()
{
    var $select = $('#countries').selectize();
    var selectize = $select[0].selectize;
    selectize.addOption({"name":"Fiji"});
    selectize.addItem('Fiji');
    selectize.refreshOptions();
}