Question

我尝试做这样的回答：https://stackoverflow.com/a/6256910/1641189

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

点击上面的答案链接，而不是让每个项目一旦被点击就移动，我将在两个选择字段之间有两个按钮。

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

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

编辑：

我曾尝试过以下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));
            });
        }
    });
});

DEMO

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

2 个答案: