JavaScript如何实现列表先按字母排序、后按数字排序？

解决方案 #

你只需要修改sortSelect函数中的排序逻辑，自定义比较规则即可。同时注意原有add函数中取option文本的属性有误，原生DOM的option元素文本属性是text不是label，否则新增的选项会显示为空。

修改后的完整JS代码

function add() {
  var frm = document.getElementById('formAdmin');
  var selectedChnls = frm.selectedAssignedChnlOrgList;
  var activChnls = frm.activeChnl;
  var inactivChnls = frm.inactiveChnl;

  var activeAssignedChnlOrgList = frm.activeAssignedChnlOrgList

  for (i = 0; i < activChnls.length; i++) {
    if (activChnls[i].selected == true) {
      var opt = document.createElement('option');
      opt.value = activChnls[i].value;
      opt.innerHTML = activChnls[i].text; // 修正属性名：将label改为text
      activChnls[i].disabled = true;
      activChnls[i].selected = false;
      selectedChnls.appendChild(opt);
    }
  }
  sortSelect();
}

function sortSelect() {
  let frm = document.getElementById('formAdmin');
  let selElem = frm.selectedAssignedChnlOrgList;
  let tmpAry = new Array();
  for (let i = 0; i < selElem.options.length; i++) {
    tmpAry[i] = [selElem.options[i].text, selElem.options[i].value];
  }
  // 自定义排序规则
  tmpAry.sort((a, b) => {
    const textA = a[0].trim();
    const textB = b[0].trim();
    // 判断字符串是否以数字开头
    const isNumStartA = /^\d/.test(textA);
    const isNumStartB = /^\d/.test(textB);
    
    // 两者都是字母开头：按A-Z字母顺序排序
    if (!isNumStartA && !isNumStartB) {
      return textA.localeCompare(textB);
    }
    // A是字母开头、B是数字开头：A排在前面
    if (!isNumStartA && isNumStartB) {
      return -1;
    }
    // A是数字开头、B是字母开头：B排在前面
    if (isNumStartA && !isNumStartB) {
      return 1;
    }
    // 两者都是数字开头：按默认字典序排序
    return textA.localeCompare(textB);
  });
  // 清空原有选项后重新渲染
  selElem.options.length = 0;
  tmpAry.forEach(item => {
    selElem.options.add(new Option(item[0], item[1]));
  });
}

排序效果

• 优先展示所有字母开头的选项，按A-Z顺序排列：Accountancy → Animal and Plant Resource → Business, Consulting and Management...依次排列
• 所有字母选项排完后，再展示数字开头的选项：4L开头的排在最前，之后依次是1763615、1863615、2540722开头的选项

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