rashley Posted December 18, 2006 Share Posted December 18, 2006 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 More sharing options...
Chocolate570 Posted December 19, 2006 Share Posted December 19, 2006 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 More sharing options...
rashley Posted December 19, 2006 Author Share Posted December 19, 2006 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 More sharing options...
jesh Posted December 19, 2006 Share Posted December 19, 2006 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 More sharing options...
rashley Posted December 21, 2006 Author Share Posted December 21, 2006 Works like a charm in Firefox, but IE throws a type-mismatch error on the "rightSelect.add(option, null);" line. Link to comment Share on other sites More sharing options...
jesh Posted December 21, 2006 Share Posted December 21, 2006 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 More sharing options...
rashley Posted December 21, 2006 Author Share Posted December 21, 2006 That did it!So rightSelect.options contains my chosen data, right?Can thank you guys enough! Link to comment Share on other sites More sharing options...
rashley Posted December 21, 2006 Author Share Posted December 21, 2006 Hmm. Turns out I can't get the data back via a CGI param after all Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now