Selectize.js选中选项置顶延迟问题求助

数据老陈

2026-8-18

解决Selectize.js选中选项即时置顶的问题

问题核心是你修改priority字段后，Selectize不会自动触发重新排序和下拉列表渲染，必须手动调用API强制刷新选项。

具体修复步骤：

在onChange事件中修改选中项的priority后，调用refreshOptions(false)方法触发选项重新排序和渲染，false参数表示保留当前选中状态。
如果需要保持下拉列表处于打开状态，可额外调用open()方法。

示例代码：

$('#country-select').selectize({
  options: countryCodes, // 包含priority字段的数据源数组
  valueField: 'code',
  labelField: 'name',
  searchField: ['name', 'code'],
  sortField: {
    field: 'priority',
    direction: 'asc' // 升序规则，priority值越小越靠前
  },
  onChange: function(value) {
    if (!value) return;
    
    // 获取当前选中的选项对象
    const selectedItem = this.options[value];
    if (!selectedItem) return;
    
    // 计算当前所有选项的最小priority，让选中项的priority更小以确保置顶
    const allPriorities = Object.values(this.options).map(opt => opt.priority);
    const minPriority = Math.min(...allPriorities);
    selectedItem.priority = minPriority - 1;
    
    // 关键操作：刷新选项，触发重新排序渲染
    this.refreshOptions(false);
    // 保持下拉列表打开（可选，根据业务需求决定）
    this.open();
  }
});