Question

我有两个选择列表，您可以在这两个列表之间移动所选选项。您还可以在右侧列表中上下移动选项。

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

我目前正在定义一个包含原始选择列表onload的数组。

实现这一目标的最佳方式是什么？

Answer 1

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

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

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]);
        }
    }
}

Answer 2

我会为项目分配升序值，以便您可以将项目插回到正确的位置。无论该项目在哪个列表中，分配的值都会保留在项目中。

如何将（不完整的）选择列表的顺序恢复为原始顺序？

2 个答案: