JS中Properties返回的下拉菜单选项如何按字母顺序排序

下拉选项不按写入顺序展示的核心原因是：你使用的Properties对象不保证键值对的遍历顺序，不同运行环境会按内部哈希规则重排条目，不要依赖put写入顺序做渲染，只需要在每一级选项渲染到下拉框前，统一加一步字母排序逻辑即可，原有三级联动的传参、模块调用逻辑完全不需要改动。

通用排序方法 #

先写一个三级下拉都能复用的工具函数，传入填充完键值对的Properties实例，直接返回按显示名称字母升序排列的选项数组：

function getSortedOptions(propInstance) {
  const options = [];
  // 取出Properties中所有键值对转为数组
  for (const key of propInstance.keys()) {
    options.push({
      value: key,
      label: propInstance.get(key)
    });
  }
  // 按显示文本做字母升序，不区分大小写；如果要按编码排序就把label换成value
  return options.sort((prev, next) => {
    return prev.label.toLowerCase().localeCompare(next.label.toLowerCase());
  });
}

各层级改造方式 #

• 第一级下拉（engg/med选项）：原有选项定义完成后，直接调用getSortedOptions拿到排序后的数组再渲染，两个选项排序后不影响核心逻辑使用。
• 第二级专业下拉：保留原有根据courseFamily判断、调用put写入专业键值对的逻辑，写入完成后不要直接用原Properties对象渲染，替换为调用工具方法拿排序结果：

// 原有专业写入逻辑完全保留
const specialProps = new Properties();
if (courseFamily === 'engg') {
  specialProps.put('comp', '计算机工程');
  specialProps.put('it', '信息技术');
  specialProps.put('mech', '机械工程');
  specialProps.put('entc', '电子与通信工程');
  specialProps.put('elct', '电子工程');
} else if (courseFamily === 'med') {
  specialProps.put('MBBS', '临床医学学士');
  specialProps.put('DDS', '牙医学博士');
  specialProps.put('DO', '骨科医学博士');
}
// 替换原有渲染逻辑，用排序后的数组渲染下拉
const sortedSpecialList = getSortedOptions(specialProps);

• 第三级课程下拉：保留原有调用com.xyz模块方法、根据specialization写入课程键值对的逻辑，写入完成后同样调用工具方法排序再渲染：

// 原有课程写入逻辑完全保留
const courseProps = new Properties();
switch(courseName) {
  case 'comp':
    courseProps.put('co', '计算机组成原理');
    courseProps.put('ds', '数据结构');
    courseProps.put('os', '操作系统');
    break;
  case 'elct':
    courseProps.put('adec', '模电数电');
    courseProps.put('ct', '通信原理');
    courseProps.put('pedc', '电力电子与拖动控制');
    break;
  case 'mech':
    courseProps.put('ht', '传热学');
    courseProps.put('kas', '机械动力学');
    courseProps.put('md', '机械设计');
    courseProps.put('mse', '材料科学基础');
    break;
  default:
    courseProps.put('error', '无匹配课程');
}
// 排序后渲染
const sortedCourseList = getSortedOptions(courseProps);

注意：如果业务需要按选项的value编码（比如comp、it、co这类字段）排序，只需要把排序函数里的prev.label和next.label替换成prev.value和next.value即可。

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