如何通过JavaScript按value值对Select下拉框选项排序？

我在通过编程方式按value值从低到高对Select下拉框内的选项重新排序时遇到了问题，无论尝试什么方法，列表始终按字母顺序排列，无法按value值控制排序。

涉及的Select字段代码如下：

<select class="jet-select__control" name="koncert-dag">
        
    <option value="" data-label="VÆLG DAG" data-counter-prefix="(" data-counter-suffix=")">VÆLG DAG</option>
        <option value="42" data-label="Fredag" data-counter-prefix="(" data-counter-suffix=")">Fredag</option>
        <option value="43" data-label="Lørdag" data-counter-prefix="(" data-counter-suffix=")">Lørdag</option>
        <option value="44" data-label="Søndag" data-counter-prefix="(" data-counter-suffix=")">Søndag</option>
        <option value="41" data-label="Torsdag" data-counter-prefix="(" data-counter-suffix=")">Torsdag</option>
</select>

上司要求使用WordPress的Elementor编辑器完成开发，导致我无法直接调整选项顺序。尝试用JavaScript强制按41-44的顺序排列，但当前代码只能反转得到41、44、43、42的顺序，代码如下：

<script>
const setId = document.querySelector('.jet-select__control');

setId.setAttribute('id', 'reorder-list');

 
window.onload = function sortOptions() {
    var options = document.getElementById('reorder-list').options;
    var optionsArray = [];
    for (var i = 0; i < options.length; i++) {
        optionsArray.push(options[i]);
    }
    optionsArray = optionsArray.sort(function (a, b) {           
        return a.HTMLSelectElement.options.charCodeAt(0) - b.HTMLSelectElement.options.charCodeAt(0);    
    });

    for (var i = 0; i <= options.length; i++) {
        options[i] = optionsArray[i];
    }
    options[0].selected = true;
}

sortOptions();
    
</script>

请问是否可以让代码按value值排序？或者直接通过JavaScript指定一个自定义的排序顺序？

1. 按value值从小到大排序 #

你现有代码的排序逻辑存在错误，a.HTMLSelectElement.options是不存在的属性，应该直接获取option的value属性并转为数字后比较。修改后的代码如下：

<script>
const selectEl = document.querySelector('.jet-select__control');

window.onload = function sortOptions() {
    // 将options集合转为数组，方便操作
    const optionsArray = Array.from(selectEl.options);
    
    // 排序逻辑：空value的默认选项保持首位，其余按value数字升序排列
    optionsArray.sort((a, b) => {
        if (a.value === '') return -1;
        if (b.value === '') return 1;
        // 转换为数字后比较，确保按数值大小排序
        return Number(a.value) - Number(b.value);
    });
    
    // 清空原select并重新插入排序后的选项
    selectEl.innerHTML = '';
    optionsArray.forEach(option => selectEl.appendChild(option));
    
    // 设置默认选中第一个选项
    selectEl.options[0].selected = true;
}

sortOptions();
</script>

核心改进点：

• 用Array.from直接将options集合转为数组，替代手动循环push
• 明确排序规则：默认选项（空value）固定在第一位，其他选项按数字value升序
• 清空原select后重新添加选项，避免直接修改options数组可能出现的异常

2. 指定自定义排序顺序 #

如果需要固定按41(Torsdag) → 42(Fredag) → 43(Lørdag) → 44(Søndag)的顺序排列，可以定义一个优先级数组，根据option的value匹配优先级排序：

<script>
const selectEl = document.querySelector('.jet-select__control');

window.onload = function sortOptions() {
    // 自定义排序顺序，按需求排列value值
    const customOrder = ['', '41', '42', '43', '44'];
    
    const optionsArray = Array.from(selectEl.options);
    
    // 根据自定义数组的索引位置排序
    optionsArray.sort((a, b) => {
        return customOrder.indexOf(a.value) - customOrder.indexOf(b.value);
    });
    
    // 重新渲染选项
    selectEl.innerHTML = '';
    optionsArray.forEach(option => selectEl.appendChild(option));
    
    selectEl.options[0].selected = true;
}

sortOptions();
</script>

这种方式灵活性更高，只需调整customOrder数组的value顺序，就能任意控制选项的排列顺序。

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