CODEWITHSUNDEEP
javascriptjquerywtforms
kj4ohh
kj4ohh

Reputation: 637

Move options between two multi-select fields

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.

Upvotes: 3

Views: 3186

Answers (2)

Loken Makwana
Loken Makwana

Reputation: 3848

You have to use jquery plugin for better result

http://loudev.com/

Upvotes: 3

The Alpha
The Alpha

Reputation: 146219

You may try this

​$(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.

Upvotes: 0

Related Questions