如何清除Alpine.js中多选下拉框（multiple select）的所有选中选项？

当前代码无法正确清除多选下拉框的选中选项，核心原因有两点：

1. 多选<select>的Alpine.js x-model绑定类型错误
   原生多选select的x-model要求绑定数组而非对象，你当前将selectedModifiers初始化为{}，不符合Alpine对多选表单元素的绑定规则，会导致响应式更新异常。

2. 未同步Selectize插件的UI状态
   页面使用了selectize第三方下拉插件，它会替换原生select的UI结构，Alpine的状态更新无法自动同步到Selectize的自定义UI，必须手动调用其API完成重置。

修复步骤 #

1. 修正Alpine状态初始值 #

将selectedModifiers的初始值从对象改为空数组：

Alpine.data("filter", (data) => ({
    // ... 其他属性
    selectedModifiers: [], // 改为数组类型
    // ... 其他属性
}));

2. 更新resetModifiers方法 #

同步重置Alpine状态与Selectize的UI显示：

resetModifiers() {
    if (this.selectedModifiers.length === 0) return;

    delete this.filteredValues['sheetModifiers'];
    this.selectedModifiers = [];

    // 获取Selectize实例并清空选中状态
    const selectEl = document.querySelector('#selectedModifiers');
    if (selectEl.selectize) {
        selectEl.selectize.setValue([]); // 重置选中值
        selectEl.selectize.clear(); // 同步UI显示
    }

    search(this.data.filterLink, this.filteredValues);
}

3. 简化判断逻辑 #

数组的length属性始终存在，原代码中typeof this.selectedModifiers.length === "undefined"的判断可直接移除，只需检查length === 0即可。

修改完成后，点击Reset按钮即可同时清空Alpine的选中状态与Selectize下拉框的UI选中项。

内容的提问来源于stack exchange，提问作者Sasha