如何对仅含name属性的HTML select下拉框排序并保留顶部占位选项

原有排序逻辑本身可正常运行，失效原因是代码使用ID选择器匹配节点，但目标<select>未配置ID属性，仅存在name="sortbyco"属性，替换为对应属性选择器即可生效。

修正后可直接运行的代码 #

// 通过name属性定位目标下拉框
const $select = $('select[name="sortbyco"]');
// 保留顶部第一个占位选项，其余选项按文本字母顺序排序后重新挂载
$select.append($select.find("option:gt(0)").sort(function (a, b) {
    return a.text.localeCompare(b.text);
}));

提示：这里用localeCompare()做文本比较，对带特殊符号、不同大小写的文本排序兼容性更好，如果需要完全复用原有比较逻辑，保留原来的三目判断写法也能正常运行。

鲁棒性更强的可选写法 #

如果后续动态渲染逻辑可能导致占位选项不在首位，可以直接通过占位项的特征（空value值）单独提取，排序完成后强制放在最顶部，不受初始位置影响：

const $select = $('select[name="sortbyco"]');
// 单独提取提示用的占位选项
const $placeholder = $select.find('option[value=""]');
// 过滤掉占位项后对剩余选项按字母排序
const $sortedOptions = $select.find('option:not([value=""])').sort(function(a, b) {
    return a.text.localeCompare(b.text);
});
// 重新按「占位项在前、排序后选项在后」的顺序挂载到下拉框
$select.empty().append($placeholder).append($sortedOptions);

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