如何调整select下拉框选项顺序，将用户选中项移至列表顶部

• 你的代码将intCountry固定写死为'4'，没有动态获取当前选中的选项，导致只能永远处理Africa这一个选项
• 插入位置逻辑错误：你调用insertBefore时传入的参考节点是原第一个节点的下一个兄弟节点，所以选中项只会插到原第一位的后面，到不了最顶部
• 遍历逻辑冗余：不需要循环遍历所有选项匹配value，直接获取当前选中项即可

HTML 部分 #

<select id="Genre" onchange="myfunction()">
  <option value="1">India</option>
  <option value="2">US</option>
  <option value="3">UK</option>
  <option value="4">Africa</option>
</select>

JS 部分 #

function myfunction() {
  const objSelect = document.getElementById('Genre');
  // 兼容低版本浏览器可以换成 objSelect.options[objSelect.selectedIndex]
  const selectedOption = objSelect.selectedOptions[0];
  // 将选中项插入到下拉框第一个节点前，自动成为新的第一项
  objSelect.insertBefore(selectedOption, objSelect.firstChild);
  // 保持选中状态
  selectedOption.selected = true;
}

修改后每次选中任意选项，都会自动将该选项移动到下拉列表的最顶部，其余选项保持原有相对顺序不变，完全符合需求。

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