用 切换排序需绑定 change 事件，根据 value 查表匹配排序函数（如 name-asc→localeCompare），数字/时间字段须类型转换，排序后必须手动重渲染 DOM 并同步 select.value。
怎么用
纯 HTML 的 本身不排序，它只负责让用户选一个值；真正排序发生在 JavaScript 拿到选中的 value 后，对数据数组调用 .sort() 或类似逻辑。别指望写个 就自动变序——那只是个开关。
常见错误是把排序逻辑全塞进 HTML，结果点击没反应、控制台没报错、但列表纹丝不动。原因往往是：没监听 change 事件，或监听了但没重新渲染 DOM。
- 必须用
addEventListener('change', ...)或onchange绑定行为 -
的value应该对应明确的排序策略，比如"name-asc"、"price-desc"，避免用中文做判断依据 - 排序后必须触发重绘：要么手动更新
innerHTML，要么调用框架的响应式更新（如 Vue 的ref、React 的setState）
JavaScript 怎么根据 .sort()
核心是把 select.value 映射成具体的比较函数。直接写一堆 if/else 容易漏 case，推荐用对象查表方式，清晰且好扩展。
注意：数字字段（如价格、ID）必须转成数字再比，否则 "10" 会返回 true（字符串比较）；时间字段要转 Date 或时间戳。
const sortMap = {
'name-asc': (a, b) => a.name.localeCompare(b.name),
'name-desc': (a, b) => b.name.localeCompare(a.name),
'price-asc': (a, b) => Number(a.price) - Number(b.price),
'price-desc': (a, b) => Number(b.price) - Number(a.price)
};
<p>select.addEventListener('change', () => {
const sorter = sortMap[select.value];
if (sorter) data.sort(sorter);
renderList(data); // 这一步不能省
});</p>
为什么选中后下拉菜单没“记住”当前值
不是 bug，是常见疏忽：JavaScript 排序后修改了数据，但没同步更新 的 value 属性。用户第二次点开时，看到的还是上次选的项，实际执行的却是新选的逻辑 —— 因为 select.value 被你改乱了。
- 每次排序前，先读
select.value；排序后，如果需要保持视觉一致，就手动设回去：select.value = selectedValue - 更稳妥的做法是把选中状态存在变量里，不依赖 DOM 属性读取
- 使用
select.selectedIndex而非value有时更可靠，尤其当的value是空或重复时
移动端 iOS Safari 下拉菜单卡顿或不触发 change
iOS Safari 对 的原生弹出框有延迟，且在某些版本中，用户点选后不一定会立刻触发 change，而是等弹窗完全关闭才触发。这会导致排序滞后半拍，甚至被用户误点两次。
- 不要依赖
change做即时反馈，加个 loading 状态或禁用按钮防止重复提交 - 可监听
input事件作补充（部分 iOS 版本支持），但兼容性不如change - 真要极致体验，就别用原生
，换成自定义下拉组件（如），但这已超出纯 HTML 范畴排序逻辑本身很简单，难的是状态同步和边界处理——比如空数据、相同字段值、用户快速连点。这些地方不加 guard，上线后第一个用户就会遇到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
