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

Move options between two multi-select fields

本文关键字：字段 之间 移动 选项 两个      更新时间：2023-09-26

我正在尝试这样的答案：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（）行来输出正在观察的当前选择，它将为正确选择的每个项目生成一个警告框。

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

http://loudev.com/

你可以试试这个

​$(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));
            });
        }
    });
});​

演示。

相关文章：