Move options between two multi-select fields

Question

I'm trying to do something like this answer: https://stackoverflow.com/a/6256910/1641189

However I want to do it with multi-select fields since they provide scroll bars.

Instead of having each item move as soon as it's clicked, like the answer link above, I am going to have two buttons between the two select fields.

Something like this: http://www.kj4ohh.com/stuff/selectfields.png

1. How would I do this in javascript/jquery?
2. How would I return the contents of both select fields back to my flask application?

EDIT:

I had tried the following 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
}

but with strange results:

With this script, if you select an item from either select field and hit the appropriate assign/unassign button it works corectly.

If you select two items, only one is moved.

If you select more than two, one is moved, one stays put and the rest vanish.

However if I add an alert() line outputting the current selection being observed, it will produce an alert box for each item selected correctly.

Answer 1

You have to use jquery plugin for better result

http://loudev.com/