按连字符分割的部分文本对HTML Select下拉框排序

没问题，我来帮你搞定这个自定义排序需求！按照你说的规则——先按第一个连字符后的文本排序，再按连字符前的开头文本排序，我们用原生JavaScript就能轻松实现。

思路拆解 #

1. 先获取目标<select>元素和它下面的所有<option>节点
2. 把<option>节点转换成数组，方便用数组的sort()方法处理
3. 自定义排序逻辑：
   • 把每个选项的文本按第一个-分割成两部分，注意去掉前后空格（避免空格干扰排序）
   • 优先比较第一个连字符后面的文本
   • 如果这部分文本相同，再比较连字符前面的文本
4. 把排序后的选项重新插入到<select>中

完整代码示例 #

<select id="mySelect">
  <option value="1">Oranges - Box A - Deliver</option>
  <option value="2">Apples - Box A - Deliver</option>
  <option value="3">Bananas - Box B - Deliver</option>
</select>

<script>
// 获取目标select元素
const selectEl = document.getElementById('mySelect');
// 将option节点转为数组
const options = Array.from(selectEl.options);

// 自定义排序函数
options.sort((optA, optB) => {
  // 分割文本并去除前后空格
  const [prefixA, suffixA] = optA.text.split('-').map(str => str.trim());
  const [prefixB, suffixB] = optB.text.split('-').map(str => str.trim());
  
  // 先按第一个连字符后的文本排序
  const suffixMatch = suffixA.localeCompare(suffixB);
  if (suffixMatch !== 0) {
    return suffixMatch;
  }
  // 后缀相同的情况下，按前缀排序
  return prefixA.localeCompare(prefixB);
});

// 清空原select，插入排序后的选项
selectEl.innerHTML = '';
options.forEach(opt => selectEl.appendChild(opt));
</script>

最终排序结果 #

执行代码后，下拉框的选项顺序会变成：

• Apples - Box A - Deliver
• Oranges - Box A - Deliver
• Bananas - Box B - Deliver

完全符合你要求的排序规则：先按第一个连字符后的文本（Box A → Box B）分组排序，同组内再按前缀文本（Apples → Oranges）排序。

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