js 刷新下拉框 被选中

<select id="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

function refreshSelect() {
  const select = document.getElementById('mySelect');
  const selectedValue = select.value; // 保存当前选中的值

  // 清空所有选项
  select.innerHTML = '';

  // 重新添加选项
  const options = [
    { value: '1', text: 'Option 1' },
    { value: '2', text: 'Option 2' },
    { value: '3', text: 'Option 3' },
    // 可以动态获取选项数据
  ];

  options.forEach(optionData => {
    const option = document.createElement('option');
    option.value = optionData.value;
    option.text = optionData.text;
    select.appendChild(option);
  });

  // 恢复选中的值
  select.value = selectedValue;
}

// 调用函数刷新下拉框
refreshSelect();

function updateSelectOptions(newOptions) {
  const select = document.getElementById('mySelect');
  const selectedValue = select.value; // 保存当前选中的值

  // 清空所有选项
  select.innerHTML = '';

  // 添加新选项
  newOptions.forEach(optionData => {
    const option = document.createElement('option');
    option.value = optionData.value;
    option.text = optionData.text;
    select.appendChild(option);
  });

  // 恢复选中的值
  select.value = selectedValue;
}

// 假设newOptions是从服务器获取的新数据
const newOptions = [
  { value: '1', text: 'Updated Option 1' },
  { value: '4', text: 'New Option 4' },
];

// 调用函数更新下拉框选项
updateSelectOptions(newOptions);