使用JavaScript对HTML select元素排序时传参失效问题

我有2个select下拉框，需要实现选项在二者之间互相移动，且移动后列表需保持有序。我从Stack Overflow参考了部分代码，目前遇到异常：将元素作为参数传入排序函数时功能不生效，若在排序函数内部显式通过id获取对应元素则功能完全正常，查看排序函数第一行注释即可了解问题现象。

PHP代码部分 #

echo "
<div><select id='listBox1' class='form-control select-manage-category' size='5'>
    <option value=1>1-text</option>
    <option value=2>2-text</option>
    <option value=3>3-text</option>
    <option value=4>4-text</option>
</select></div>

<input id='add-category' onclick='ClickAdd()'  name='add' type='button' value='Add Item'>
<input id='remove-category' onclick='ClickRemove()' name='add' type='button' value='Remove Item'>

<div>
    <select id='listBox2' class='form-group percent-100' size='5'></select>
</div>
";

echo "<script>";
include 'bstest.js';
echo "</script>";

JS代码（bstest.js文件内容） #

function ClickAdd() 
{
    // 获取左侧下拉框
    var e = document.getElementById('listBox1');

    // 获取选中项的文本和值
    var eText = e.options[e.selectedIndex].text;
    var eVal = e.value;
        
    // 创建新option元素
    var opt = document.createElement('option');     
    opt.text = eText;
    opt.value = eVal;       
        
    // 添加到右侧下拉框
    document.getElementById('listBox2').options.add(opt);
        
    // 从左侧下拉框移除选中项
    value = e.selectedIndex;
    e.removeChild(e[value]);
    
    sortSelect(e);
    
}

function ClickRemove()
{
    // 获取右侧下拉框
    var e = document.getElementById('listBox2');
    
    // 获取选中项的文本和值
    var eText = e.options[e.selectedIndex].text;
    var eVal = e.value;

    // 创建新option元素
    var opt = document.createElement('option');     
    opt.text = eText;
    opt.value = eVal;       

    // 添加到左侧下拉框
    document.getElementById('listBox1').options.add(opt);

    // 从右侧下拉框移除选中项
    value = e.selectedIndex;
    e.removeChild(e[value]);
    
    sortSelect(e);
}

function sortSelect(selectToSort) 
{
    
    //selectToSort = document.getElementById('listBox1');       // 取消注释功能正常，注释后功能失效

    var arrOptions = [];
    for (var i = 0; i < selectToSort.options.length; i++)  
    {
        arrOptions[i] = [];
        arrOptions[i][0] = selectToSort.options[i].value;
        arrOptions[i][1] = selectToSort.options[i].text;
        arrOptions[i][2] = selectToSort.options[i].selected;
    }
    arrOptions.sort();
    for (var i = 0; i < selectToSort.options.length; i++)  
    {
        selectToSort.options[i].value = arrOptions[i][0];
        selectToSort.options[i].text = arrOptions[i][1];
        selectToSort.options[i].selected = arrOptions[i][2];
    }
    return;
}

问题根源 #

你当前的代码仅对移出元素的源下拉框执行了排序，新增了元素的目标下拉框完全没有触发排序逻辑，才会出现排序不生效的错觉。你注释掉的代码是直接写死排序listBox1，刚好匹配了你测试时的预期，才会误以为是传参导致的问题。

修复步骤 #

1. 调整点击事件的排序调用逻辑，给新增元素的目标下拉框也执行排序
   修改ClickAdd函数末尾的排序调用部分：

sortSelect(e); // 对移出元素的源列表listBox1排序
sortSelect(document.getElementById('listBox2')); // 对新增元素的目标列表listBox2排序

同理修改ClickRemove函数末尾的排序调用部分：

sortSelect(e); // 对移出元素的源列表listBox2排序
sortSelect(document.getElementById('listBox1')); // 对新增元素的目标列表listBox1排序

2. （可选优化）如果你的option值为数字，建议修改排序规则避免出现10排在2前面的字符串排序异常：

// 把sortSelect函数里的arrOptions.sort()替换为下面的代码
arrOptions.sort(function(a, b) {
    return parseInt(a[0]) - parseInt(b[0]);
});

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