如何在jQuery的each函数中对HTML下拉框按id/key升降序排序？

嘿，我来帮你搞定这个下拉框排序的问题！你说调整了JSON编码的降序设置但没生效，大概率是后端输出的JSON其实没真的按key降序排列，或者前端渲染的时候又悄悄重新排序了。下面给你几个靠谱的解决思路：

不管后端返回的顺序如何，前端拿到数据后自己手动排序，这样完全可控，再也不用依赖后端的输出顺序。举个原生JS的例子：

// 假设这是后端返回的原始下拉数据
const rawDropdownData = [
  { key: 1, value: "选项1" },
  { key: 3, value: "选项3" },
  { key: 2, value: "选项2" }
];

// 按key降序排序（如果key是字符串，就用localeCompare）
const sortedData = rawDropdownData.sort((a, b) => b.key - a.key);

// 渲染到下拉框
const selectElement = document.getElementById("your-select-id");
sortedData.forEach(item => {
  const option = document.createElement("option");
  option.value = item.key;
  option.textContent = item.value;
  selectElement.appendChild(option);
});

如果用框架的话更简单：

• Vue：在计算属性里处理排序，避免每次渲染都重新排序：

  <template>
    <select>
      <option v-for="item in sortedData" :key="item.key" :value="item.key">{{ item.value }}</option>
    </select>
  </template>
  <script>
  export default {
    data() {
      return { rawData: [] }; // 后端返回的数据
    },
    computed: {
      sortedData() {
        return [...this.rawData].sort((a, b) => b.key - a.key);
      }
    }
  }
  </script>
  

• React：用useMemo缓存排序后的结果，提升性能：

  import { useMemo } from 'react';
  
  function MySelect({ rawData }) {
    const sortedData = useMemo(() => {
      return [...rawData].sort((a, b) => b.key - a.key);
    }, [rawData]);
  
    return (
      <select>
        {sortedData.map(item => (
          <option key={item.key} value={item.key}>{item.value}</option>
        ))}
      </select>
    );
  }
  

你说调整了后端的降序设置但没生效，可能是这些细节没注意到：

• 如果是PHP：关联数组默认按插入顺序保存，如果你是从数据库查数据，一定要确保SQL语句加了ORDER BY key DESC，而不是只在PHP里手动调整数组顺序（有时候数组操作可能因为引用或者其他原因没生效）；另外json_encode会保留关联数组的顺序，所以只要你的数组是降序的，转成JSON后也是对的。
• 如果是Java：普通HashMap是无序的，要改用LinkedHashMap来保存排序后的键值对，再转成JSON，这样才能保留顺序。
• 如果是Python：3.7版本之前的字典是无序的，所以排序后要存在有序结构里再转JSON；3.7+的字典会保留插入顺序，所以只要先把数据按key降序排好再转JSON就行。

如果你用了Element UI、Ant Design这类组件库的下拉框，有些组件默认会对选项进行字母/数值排序，哪怕你传的是已排序的数组。这时候要找组件的配置项，比如：

• Element UI的el-select没有默认排序，但如果用了el-option-group或者其他特殊属性，可能会影响；
• Ant Design的Select组件默认也不会排序，但如果开启了showSearch，可能会触发搜索排序，这时候可以设置filterOption为自定义函数，避免自动排序。

最后给个小建议：优先用前端主动排序的方式，这样不管后端有没有小失误，都能保证下拉框的顺序完全符合你的要求，调试起来也更方便～

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