如何实现双列表框项移动后的自动排序？

这个需求很合理，要让列表项在来回移动后恢复原始顺序，关键是给每个选项保留一个固定的原始排序标记，这样不管怎么折腾，都能依据这个标记重新排回原来的顺序。我帮你调整代码，加上自动排序的功能：

1. 初始化原始排序标记（可选，自动生成） #

如果你的HTML里没给选项加排序标记，可以在页面加载时自动给每个选项绑定一个固定的排序序号：

$(function() {
  // 给两个列表的所有option添加原始排序值（从1开始递增）
  $("#list1, #list2").find("option").each(function(index) {
    $(this).data("sort", index + 1);
  });

  // --- 下面是你原来的按钮点击逻辑 ---

2. 封装通用排序函数 #

写一个可复用的排序函数，负责根据原始排序标记对指定列表重新排序：

function sortList(listSelector) {
  const $targetList = $(listSelector);
  // 按data-sort的数值从小到大排序选项
  const sortedOptions = $targetList.find("option").sort((a, b) => {
    const sortA = parseInt($(a).data("sort"), 10);
    const sortB = parseInt($(b).data("sort"), 10);
    return sortA - sortB;
  });
  // 清空列表后重新添加排序后的选项
  $targetList.empty().append(sortedOptions);
}

3. 修改按钮点击事件，添加排序逻辑 #

在你原来的移动代码执行完成后，调用排序函数，确保移动后列表自动恢复有序状态：

$("#button1").click(function() {
  $("#list1 > option:selected").each(function() {
    $(this).remove().appendTo("#list2");
  });
  // 移动完成后对两个列表都重新排序
  sortList("#list1");
  sortList("#list2");
});

$("#button2").click(function() {
  $("#list2 > option:selected").each(function() {
    $(this).remove().appendTo("#list1");
  });
  // 同样移动后执行排序
  sortList("#list1");
  sortList("#list2");
});

原理说明 #

• 每个选项的data-sort存储了它的原始位置序号，这个值不会随着选项移动而改变
• 每次移动操作完成后，调用sortList函数，会把列表内的选项按data-sort从小到大重新排列，这样不管你把选项移走再移回，都会回到最初的12345顺序

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