title: Move options between two multi-select fields
body: <p>I'm trying to do something like this answer:  <a href="https://stackoverflow.com/a/6256910/1641189">https://stackoverflow.com/a/6256910/1641189</a></p>
  
  <p>However I want to do it with multi-select fields since they provide scroll bars.</p>
  
  <p>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.</p>
  
  <p>Something like this:  <a href="http://www.kj4ohh.com/stuff/selectfields.png" rel="nofollow noreferrer">http://www.kj4ohh.com/stuff/selectfields.png</a></p>
  
  <ol>
  <li>How would I do this in javascript/jquery?</li>
  <li>How would I return the contents of both select fields back to my flask application?</li>
  </ol>
  
  <p>EDIT:</p>
  
  <p>I had tried the following javascript:</p>
  
  <pre><code>function assign(form)
  {
     for(i=0;i&lt;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&lt;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
  }
  </code></pre>
  
  <p>but with strange results:</p>
  
  <p>With this script, if you select an item from either select field and hit the appropriate assign/unassign button it works corectly.</p>
  
  <p>If you select two items, only one is moved.</p>
  
  <p>If you select more than two, one is moved, one stays put and the rest vanish.</p>
  
  <p>However if I add an alert() line outputting the current selection being observed, it will produce an alert box for each item selected correctly.</p>