如何实现添加项至jQuery Chosen组件后自动选中？

当然支持啦！jQuery Chosen完全能实现你要的「添加项后自动选中」需求，我给你分享个亲测有效的实现步骤和代码示例：

核心思路 #

Chosen是基于原生<select>元素生成的UI组件，所以操作流程要分两步：先更新原生select的选项，再通知Chosen同步UI，最后设置选中状态并再次同步。

具体实现代码 #

假设你的HTML结构是这样的：

<!-- Chosen选择器 -->
<select id="target-select" class="chosen-select" multiple>
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
</select>

<!-- 输入和添加按钮 -->
<input type="text" id="new-item-input" placeholder="输入要添加的项">
<button id="add-select-item">添加并自动选中</button>

对应的JavaScript代码：

$(document).ready(function() {
  // 初始化Chosen组件
  $("#target-select").chosen({
    width: "300px" // 可选：设置宽度让UI更美观
  });

  // 绑定添加按钮的点击事件
  $("#add-select-item").click(function() {
    const inputText = $("#new-item-input").val().trim();
    if (!inputText) {
      alert("请输入要添加的内容哦");
      return;
    }

    // 生成唯一的选项值（这里用时间戳，你可以根据业务调整）
    const itemValue = `item-${Date.now()}`;

    // 1. 把新选项添加到原生select中
    $("#target-select").append(`<option value="${itemValue}">${inputText}</option>`);

    // 2. 通知Chosen更新UI，让新选项显示在下拉列表里
    $("#target-select").trigger("chosen:updated");

    // 3. 设置选中这个新选项（多选的话可以传数组，比如保留之前选中项：val([oldValue, itemValue])）
    $("#target-select").val(itemValue);

    // 4. 再次触发更新，让Chosen把新选项标记为选中状态
    $("#target-select").trigger("chosen:updated");

    // 清空输入框，方便下次输入
    $("#new-item-input").val("");
  });
});

注意事项 #

• 如果是单选的Chosen组件，代码逻辑完全一样，val()方法直接传单个值即可；
• 选项的value一定要保证唯一，不然会出现选中混乱的问题；
• 每次修改原生select后，必须调用trigger("chosen:updated")，否则Chosen的UI不会同步变化。

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