Jump to content

Side-by-side multi-select control


rashley
 Share

Recommended Posts

Greetings all.I have need for a pop-up window with one of those widgets that shows a list on the left that allows you to add or remove selections to a list on the right. Same functionality as a mult-select scrolling list box, just a much better inteface for very long lists.I'm fairly new to JavaScript, and haven't been able to find any examples of what I'm talking about.The fact that I don't know the NAME of the type of widget I'm looking for doesn't help either.Still, I've seen these things everywhere, so there must be something out there so I don't have to reinvent the wheel.Do any of you know what this type of interface is called, or better yet, know where I might find some example code for this?Thanks!

Link to comment
Share on other sites

Greetings all.I have need for a pop-up window with one of those widgets that shows a list on the left that allows you to add or remove selections to a list on the right. Same functionality as a mult-select scrolling list box, just a much better inteface for very long lists.I'm fairly new to JavaScript, and haven't been able to find any examples of what I'm talking about.The fact that I don't know the NAME of the type of widget I'm looking for doesn't help either.Still, I've seen these things everywhere, so there must be something out there so I don't have to reinvent the wheel.Do any of you know what this type of interface is called, or better yet, know where I might find some example code for this?Thanks!
I can get you a code--but then do you want to be able to pass the information of the pop up to the parent window? :)
Link to comment
Share on other sites

I can get you a code--but then do you want to be able to pass the information of the pop up to the parent window? :)
Well yes, that would be nice, but I think I can take care of that part. This whole thing is part of a cgi app, so I'm pretty sure I can attach the result set to a param and get the data where I need it to go.If I absolutely can't figure it out, I can make the control part of the parent window instead of a pop-up.It's really just the GUI part I'm stuck on. Any help or references would be greatly appreciated. :)
Link to comment
Share on other sites

It's really just the GUI part I'm stuck on. Any help or references would be greatly appreciated. :)
I don't personally know of any existing code that you can use (I'm sure it's out there, I just don't know where), but this may help get you started:
<html><head><script>function moveRight(){    var leftSelect = document.getElementById("leftSelect");    var rightSelect = document.getElementById("rightSelect");    var leftOptions = leftSelect.options;    var count = leftOptions.length;    var option;    for(var i = count-1; i >= 0; i--)    {        option = leftOptions[i];        if(option.selected)        {            leftSelect.remove(i);            rightSelect.add(option, null);        }    }}</script><style>select { height: 100px; }</style></head><body><select id="leftSelect" multiple="multiple"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select><select id="rightSelect" multiple="multiple"></select><button onclick="moveRight();">moveRight</button></body></html>

Basically, you'll loop through all the options (backwards) in one of the selects and check to see if the option was selected. If so, add it to the other select and remove it from this one. The function above could probably be generalized so that you could use the same function for moving options in either direction, but I'll leave that up to you.I hope this helps.

Link to comment
Share on other sites

Works like a charm in Firefox, but IE throws a type-mismatch error on the "rightSelect.add(option, null);" line.
Hmm, try this instead:
rightSelect.options[rightSelect.options.length] = option;//rightSelect.add(option, null);

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...