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

Question

我正在尝试将解决方案复制到 this question 但没有成功。我需要向已初始化的 selectize 元素添加一个新的 selected 选项，该元素可能已经或可能未将其列为 <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 (and jsfiddle2 了解替代方法）。这些都没有任何效果。感谢任何我出错的地方。

Answer 1

有效（这里是 Fiddle）：

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

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

Adding new options to an initialised selectize element

jquery

selectize.js