如何在Selectize的onDropdownOpen事件中重新初始化选项？报错求助

算力阿峰

2026-5-28

解决Selectize实例调用报错的问题

你遇到的Uncaught TypeError: selectx[0].selectize is not a function错误，核心原因是获取Selectize实例的方式不对。咱们一步步来修正：

错误原因分析

当你通过$('#location_package').selectize({...})初始化组件后，返回的是jQuery对象。而DOM元素上的selectize是一个属性（指向实例对象），不是可调用的函数——你加了()自然会报错。

修正方案1：回调内直接用`this`（最简洁）

在Selectize的回调函数里，this默认指向当前的Selectize实例，所以直接调用this.clearOptions()就可以实现需求：

$('#location_package').selectize({
  onDropdownOpen: function() {
    console.log('opened');
    this.clearOptions(); // 直接用this操作实例
  }
});

修正方案2：提前存储实例（方便后续外部调用）

如果需要在回调之外也操作这个实例，可以在初始化时就把实例存下来：

// 初始化时获取实例并存储
var selectizeInstance = $('#location_package').selectize({
  onDropdownOpen: function() {
    console.log('opened');
    selectizeInstance.clearOptions();
  }
})[0].selectize; // 注意这里是.selectize属性，不是.selectize()函数

// 后续其他地方也能直接用实例
// selectizeInstance.addOption(...);

修正方案3：通过jQuery data方法获取实例

Selectize初始化后会把实例绑定到jQuery对象的data('selectize')上，也可以这样获取：

$('#location_package').selectize({
  onDropdownOpen: function() {
    console.log('opened');
    $('#location_package').data('selectize').clearOptions();
  }
});