javascript – 如何将(不完整的)选择列表的顺序恢复为原始顺序？

我有两个选择列表,您可以在其中移动所选选项.您还可以在右侧列表中上下移动选项.

当我将选项移回左侧列表时,我希望它们按列表顺序保留其原始位置,即使列表缺少某些原始选项.这仅仅是为了使列表对用户更方便.

我目前正在定义一个包含原始Select list onl oad的数组.

实现这个的最佳方法是什么？

解决方法:

您可以将原始订单存储在一个数组中,当插回时,确定数组中要插入的最新元素是什么,并且与选择列表中当前的元素相匹配.然后插入之后.

一个更好的解决方案是只存储旧的数组并使用所需元素重新填充每个插入,如下所示(警告：代码未测试)

function init(selectId) {
    var s = document.getElementById(selectId);
    select_defaults[selectId] = [];
    select_on[selectId] = [];
    for (var i = 0; i < s.options.length; i++) {
        select_defaults[selectId][i] = s.options[i];
        select_on[selectId][i] = 1;
        var value = list.options[i].value;
        select_map_values[selectId][value] = i if you wish to add/remove by value.
        var id = list.options[i].id; // if ID is defined for all options
        select_map_ids[selectId][id] = i if you wish to add/remove by id.
    }
}

function switch(selectId, num, id, value, to_add) { // You can pass number, value or id
    if (num == null) {
        if (id != null) {
            num = select_map_ids[selectId][id]; // check if empty?
        } else {
            num = select_map_values[selectId][value]; // check if empty?
        }
    }
    var old = select_on[selectId][num];
    var newOption = (to_add) : 1 : 0;
    if (old != newOption) {
        select_on[selectId][num] = newOption;
        redraw(selectId);
    }
}

function add(selectId, num, id, value) {
    switch(selectId, num, id, value, 1);
}

function remove(selectId, num, id, value) {
    switch(selectId, num, id, value, 0);
}

function redraw(selectId) {
    var s = document.getElementById(selectId);
    s.options.length = 0; // empty out
    for (var i = 0; i < select_on[selectId].length; i++) { 
        // can use global "initial_length" stored in init() instead of select_on[selectId].length
        if (select_on[selectId][i] == 1) {
            s.options.push(select_defaults[selectId][i]);
        }
    }
}

标签：javascript,selectlist
来源： https://codeday.me/bug/20190621/1258605.html