更新select元素内部数据时保留当前选中项的实现求助

核心逻辑：更新选项前先缓存当前选中的值，重绘选项完成后重新匹配赋值选中状态即可，下面分两种常用场景给出可直接运行的代码：

原生JavaScript实现 #

// 选中目标select元素
const selectEl = document.querySelector('#target-select');
// 1. 缓存更新前的选中值
const currentSelectedValue = selectEl.value;

// 2. 此处为你的AJAX请求逻辑，假设请求返回的新选项结构如下：
// const newOptions = [ {value: '1', text: '选项一'}, {value: '2', text: '选项二'}, {value: '3', text: '选项三'} ]

// 3. 清空原有选项
selectEl.innerHTML = '';

// 4. 渲染新选项，同时匹配选中状态
newOptions.forEach(item => {
  const option = document.createElement('option');
  option.value = item.value;
  option.innerText = item.text;
  // 和缓存的选中值匹配则设为选中
  if (item.value === currentSelectedValue) {
    option.selected = true;
  }
  selectEl.appendChild(option);
})

注意事项：

• 如果新返回的选项列表中不存在之前的选中值，可按需添加兜底逻辑，比如默认选中第一个选项或者清空选中状态
• 注意值的类型匹配，比如如果value是数字类型，要避免字符串和数字类型不匹配导致选中失效

jQuery实现 #

如果项目使用jQuery，代码可以更简洁：

const $select = $('#target-select');
// 缓存当前选中值
const currentSelected = $select.val();

// AJAX获取newOptions数据后执行以下逻辑
$select.empty();
$.each(newOptions, function(index, item) {
  $select.append(`<option value="${item.value}">${item.text}</option>`);
})
// 直接赋值恢复选中状态
$select.val(currentSelected);

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