使用chosen-jquery重置多选框时，值已重置但界面未更新怎么办？

我正在使用jQuery 3.3.1 slim min和Chosen 1.8.7。表单内有一个多选select和重置按钮：

<form>
  <select id="users" name="users" tabindex="2" class="form-control chosen-select" multiple>
    <option value=""></option>
    <option value="1">1</option>
  </select>

  <button type="button">
    Clear
  </button>

</form>

我对Chosen进行了初始化：

$("#users")
  .chosen({
    no_results_text: "Oops, nothing found!",
  })
  .change(function(event) {
    if (event.target == this) {
      $users = $(this).val()
    }
  })

但点击重置按钮时，仅重置了select的值，Chosen的HTML界面并未更新：

$('button').on('click', function() {
  $("#users").val([]).trigger('chosen:updated')
})

我也尝试了以下代码，同样无效：

$("#users").val('').trigger('chosen:updated')

补充说明： #

• 操作前状态：Chosen多选框未选中任何选项
• 添加选项后状态：Chosen多选框中已选中选项（显示在输入区域内）
• 控制台无报错信息
• 执行重置代码后：select的value已清空，但Chosen界面上选中的选项仍未移除

解决方案 #

方法1：同步取消option选中状态后触发更新 #

Chosen处理多选时依赖option的selected属性，直接设置val([])可能未同步更新该属性。可以先手动取消所有选中的option，再触发Chosen更新：

$('button').on('click', function() {
  $("#users option:selected").prop("selected", false);
  $("#users").trigger("chosen:updated");
})

方法2：排查jQuery slim版本兼容性 #

jQuery slim版本移除了部分功能，虽理论上不影响Chosen基础操作，但如果方法1无效，可尝试替换为完整版本的jQuery 3.3.1，验证是否为版本限制导致问题。

额外注意事项 #

• 确保Chosen初始化代码在DOM加载完成后执行（包裹在$(function(){ ... })中），避免因DOM未就绪导致初始化不完整。
• 检查是否有其他JS代码干扰chosen:updated事件触发，比如事件阻止逻辑。

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