前端 select 控制 option 排序方法 - HTML & JavaScript 实现

前端 select 控制 option 的顺序一般有两种方式：

1. 在 HTML 中直接设置 option 的顺序：在 select 元素内部，按照需要的顺序添加 option 元素。例如：

<select>
  <option value='1'>Option 1</option>
  <option value='2'>Option 2</option>
  <option value='3'>Option 3</option>
</select>

以上代码中，option 元素的顺序就是它们在 select 元素内部的排列顺序。

2. 使用 JavaScript 动态控制 option 的顺序：通过 JavaScript 可以动态地改变 option 元素的顺序。例如，可以使用 appendChild 方法将 option 元素添加到 select 元素的末尾，或者使用 insertBefore 方法将 option 元素插入到指定位置。例如：

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

<script>
  var select = document.getElementById('mySelect');
  var option2 = document.querySelector('option[value='2']');
  var option3 = document.querySelector('option[value='3']');

  select.insertBefore(option3, option2); // 将 option3 插入到 option2 之前
</script>

以上代码中，通过 insertBefore 方法将 option3 插入到 option2 之前，从而改变了 option 的顺序。

需要注意的是，无论是哪种方式，option 元素的顺序只会影响在前端展示时的顺序，不会改变实际传递给后端的值的顺序。如果需要按照自定义的顺序将选中的 option 值传递给后端，可以通过 JavaScript 获取选中的 option 值，并进行处理。