从Selectize输入框移除选项时出现语法错误

问题根源 #

报错的核心原因是：你使用JSON字符串作为Selectize选项的value值，当Selectize执行updateOriginalInput方法时，会用jQuery构造option[value="XXX"]格式的选择器，而JSON字符串中的双引号与选择器外层的双引号嵌套冲突，导致Sizzle（jQuery的选择器引擎）无法解析，触发语法错误。

解决方案 #

1. 最优方案：改用简洁唯一标识作为选项value #

不要直接把JSON字符串作为选项的value，改用选项数据里的唯一字段（比如id）作为value，完整的JSON数据可以存在Selectize的选项配置中。这样既避免了引号冲突，也让数据结构更清晰。

初始化Selectize示例：

$('#customerDropdownMailform').selectize({
    options: [
        { 
            value: 'allCustomers',  // 用唯一id作为value
            text: '所有客户',        // 显示文本
            data: { id: 'allCustomers', type: 'keyword' }  // 存储完整JSON数据
        },
        // 其他选项同理
    ],
    // 其他配置项（比如渲染、搜索规则等）
});

修正点击移除的代码：

同时注意不要每次点击都重复初始化Selectize，提前缓存实例：

// 提前缓存Selectize实例，避免重复初始化
const selectizeInstance = $('#customerDropdownMailform').selectize()[0].selectize;

$(document).on('click', 'div.selectize-input div.item', function (e) {
    const selectedValue = $(this).attr("data-value");
    selectizeInstance.removeItem(selectedValue);
    selectizeInstance.refreshItems();
    selectizeInstance.refreshOptions();
});

2. 临时修复（不推荐）：转义JSON字符串中的双引号 #

如果必须保留JSON作为value，可以在生成选项时对JSON字符串的双引号进行转义，或者手动处理Selectize的选择器逻辑，但这种方式容易引发其他问题，仅作为应急方案：

// 生成选项时转义JSON字符串的双引号
const jsonValue = JSON.stringify({id:"allCustomers",type:"keyword"}).replace(/"/g, '"');
// 然后将转义后的字符串作为option的value

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