javascript - 在两个多选字段之间移动选项

Question

我正在尝试做这样的事情： https ://stackoverflow.com/a/6256910/1641189

但是我想用多选字段来做，因为它们提供滚动条。

我不会像上面的答案链接那样让每个项目在单击后立即移动，而是在两个选择字段之间设置两个按钮。

像这样的东西： http ://www.kj4ohh.com/stuff/selectfields.png

1. 我将如何在 javascript/jquery 中执行此操作？
2. 如何将两个选择字段的内容返回到我的烧瓶应用程序？

编辑：

我尝试了以下javascript：

function assign(form)
{
   for(i=0;i<form.unassigned.length;i++) {
      if (form.unassigned.options[i].selected == true) {
         form.assigned.add(form.unassigned.options[i]);
         form.unassigned.remove(i);
      }
   }
   //unselect all items
   form.assigned.selectedIndex = -1
}

function unassign(form)
{
   for(i=0;i<form.assigned.length;i++) {
      if (form.assigned.options[i].selected == true) {
         form.unassigned.add(form.assigned.options[i]);
         form.assigned.remove(i);
      }
   }
   //unselect all items
   form.unassigned.selectedIndex = -1
}

但结果很奇怪：

使用此脚本，如果您从任一选择字段中选择一个项目并点击相应的分配/取消分配按钮，它就会正常工作。

如果选择两项，则仅移动一项。

如果您选择两个以上，则移动一个，一个保持不动，其余的消失。

但是，如果我添加一个输出当前正在观察的选择的 alert() 行，它将为正确选择的每个项目生成一个警告框。

Answer 1

您必须使用 jquery 插件以获得更好的结果

http://loudev.com/

Answer 2

你可以试试这个

​$(function(){
    $('#toSel1, #toSel2').on('click', function(){
        if($(this).attr('id')=='toSel2')
        {
            var l=$('#sel1 option:selected').length;
            if(!l) { 
                alert("Option not selected !");
                return false;
            }
            $('#sel1 option:selected').each(function(){
                $('#sel2').append($(this));
            });
        }
        else
        {
            var l=$('#sel2 option:selected').length;
            if(!l) { 
                alert("Option not selected !");
                return false;
            }
            $('#sel2 option:selected').each(function(){
                $('#sel1').append($(this));
            });
        }
    });
});​

演示。