如何无需删除选项，直接修改Selectize输入框的已选值内容

默认情况下Selectize选中项后无法直接编辑，必须清空重来，下面两种方案可以实现直接修改已选中值的需求：

方案一：点击选中项直接进入编辑模式 #

开启创建新选项的功能，同时绑定选中项的点击事件，将选中内容填充到输入框供编辑：

$('#your-selectize-input').selectize({
  create: true, // 允许创建新选项，确保修改后能提交
  onInitialize: function() {
    const self = this;
    // 给每个选中项绑定点击事件
    this.$input.parent().on('click', '.item', function() {
      const itemText = $(this).text();
      const itemValue = $(this).data('value');
      
      // 移除当前选中项
      self.removeItem(itemValue);
      // 将选中内容填入输入框并聚焦
      self.$input.val(itemText);
      self.$input.focus();
    });
  }
});

方案二：给选中项添加编辑按钮 #

自定义选中项的渲染模板，增加编辑按钮，点击后进入编辑状态，操作更直观：

$('#your-selectize-input').selectize({
  render: {
    // 自定义选中项的HTML结构，添加编辑按钮
    item: function(data, escape) {
      return `
        <div class="item" data-value="${escape(data.value)}">
          ${escape(data.text)}
          <button type="button" class="edit-btn" style="margin-left: 8px; border: none; background: none; cursor: pointer;">✏️</button>
        </div>
      `;
    }
  },
  onInitialize: function() {
    const self = this;
    // 绑定编辑按钮的点击事件
    this.$input.parent().on('click', '.edit-btn', function(e) {
      e.stopPropagation(); // 阻止事件冒泡，避免触发选中项的点击逻辑
      const $item = $(this).parent();
      const itemValue = $item.data('value');
      const itemText = $item.text().replace('✏️', '').trim();
      
      // 移除原选中项
      self.removeItem(itemValue);
      // 填充内容到输入框并聚焦
      self.$input.val(itemText);
      self.$input.focus();
    });
  }
});

额外提示 #

• 如果需要保留原选项的关联值，修改完成后可以调用self.addItem(newValue)添加修改后的项，或者通过self.updateOption(oldValue, { text: newText })直接更新原有选项的文本。
• 若使用远程数据源，需要在onChange事件中同步处理后端数据的更新逻辑。

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