Semantic UI多选下拉框刷新后选中值丢失问题求助

嘿，我完全懂你遇到的麻烦——单选下拉框在Ajax刷新后能好好保留选中状态，可多选的每次都会被重置，太闹心了。其实这是因为Semantic UI的多选下拉框组件在重新初始化时，不会自动记住之前的选中项，而单选的刚好能从原生select元素里读取到选中状态，咱们来一步步搞定这个问题：

问题根源 #

当你通过Ajax刷新局部视图（或者每次ajaxStop触发时重新初始化dropdown），Semantic UI的多选dropdown组件在重新初始化过程中，没办法自动保留之前的选中值。单选dropdown因为原生select的selected属性还存在，所以能正常恢复，但多选的情况需要我们手动介入，提前保存并恢复选中值。

解决方案代码修改 #

我们只需要做两件核心事：在刷新视图前保存多选下拉框的选中值，在视图渲染并初始化dropdown后恢复这些值。

1. 保存选中值（修改点击事件）

在点击Submit按钮触发刷新前，先把多选下拉框当前的选中值存到全局变量里：

$(document).on('click', 'button', () => {
  // 获取多选下拉框的选中值
  const multiSelected = $('#viewA select[multiple]').dropdown('get value');
  // 暂存到全局变量，方便后续恢复
  window.multiSelectedValues = multiSelected;
  
  bindViewB();
});

2. 恢复选中值（修改ajaxStop事件）

每次Ajax请求结束、初始化完dropdown后，检查有没有保存的选中值，有的话就恢复回去：

$(document).ajaxStop(function() {
  $(".dropdown").dropdown({
    useLabels: false,
  });
  
  // 恢复多选下拉框的选中值
  if (window.multiSelectedValues) {
    $('#viewA select[multiple]').dropdown('set selected', window.multiSelectedValues);
    // 恢复后清空变量，避免下次不必要的误恢复
    delete window.multiSelectedValues;
  }
});

3. 小细节规范修正

你的HTML里多选下拉框的属性写的是Multiple，虽然HTML不区分大小写，但规范写法是小写的multiple，建议调整一下：

<select class="ui dropdown" multiple>
<option value="">Select Multiple Car</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

拓展：如果需要重新渲染下拉框所在的局部视图 #

要是你提交后不仅刷新表格，还会重新渲染viewA（也就是下拉框所在的区域），那还要修改bindViewA函数，在渲染新HTML前先保存当前选中值：

function bindViewA() {
  // 先检查下拉框是否存在，存在就保存选中值
  const existingMultiSelect = $('#viewA select[multiple]');
  if (existingMultiSelect.length) {
    window.multiSelectedValues = existingMultiSelect.dropdown('get value');
  }
  
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/todos/1"
  });
  $("#viewA").html(viewA);
}

这样修改后，不管是刷新表格还是重新渲染下拉框区域，多选下拉框的选中值都能稳稳保留住啦！

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