Sunday, October 23, 2005
Tutorial Mixed2b - Select list move options
Tutorial Mixed2b has changed very little since I wrote the code in 2001, but if I have any update announcements, I'll post them here.
2005-10-23
Made changes just to the html, such as multiple to multiple="multiple",
to make it xhtml compliant.
2005-10-23
One thing I've been asked is how to get the example working with PHP. If you're submitting the form to PHP server-side, then try the following adjustments.
and
<select id="sel1" name="selectName1[]" size="10" multiple="multiple">
and
<input type="button" value="-->"
onclick="moveOptions(document.getElementById('sel1'),
document.getElementById('sel2'));" /><br />
<input type="button" value="<--"
onclick="moveOptions(document.getElementById('sel2'),
document.getElementById('sel1'));" />
<select id="sel2" name="selectName2[]" size="10" multiple="multiple">
Since PHP requires brackets in the name for a multiple select, you can't reference the name using JavaScript, so instead you can reference the id.
posted by Keith [10/23/2005 12:41:00 PM] - permalink - 8 comments
8 comment(s):
wrote:
Can you do this in one selection box, that is, move the items up and down in one list?
Posted [1/17/2006 11:43:00 AM]
Keith wrote:
I don't have the exact code to do this, and it might be a while before I'll have the chance to write something up, so in the meantime, refer to my Add/Remove Options (Old School) tutorial or my Add/Remove Options (DOM). You'd need to tweak them to suit your needs.
But my examples aren't the only game in town, so here's an example from another site that probably does what you want. I haven't tested it, but it looks good.
breakingpar.com
Posted [1/17/2006 05:38:00 PM]
wrote:
This is a great script. I've had to write a little bit more code to get the values in the second box submitted (basically looping round the contents and setting selected = true)
This works fine in Firefox but for some reason IE doesn't seem to be passing the values through.
Do you have any idea what I'm doing wrong?
Posted [2/06/2006 11:59:00 AM]
Keith wrote:
Greg,
I had previously written a tutorial to submit the options in a select. There are two different methods (producing different ways of submitting the data), and both work in Firefox and IE. One of the methods sounds like the way you're doing it, so hopefully it's of some use to you.
http://www.mredkj.com/tutorials/tutorial007.html
Posted [2/06/2006 03:33:00 PM]
wrote:
Has anyone tried this listbox swapping functionallity on IE7?
If not then try it and you will see the problems.
May be some bug in IE7
Posted [6/22/2006 03:59:00 AM]
Keith wrote:
Anonymous wrote...
Has anyone tried this listbox swapping functionallity on IE7?
If not then try it and you will see the problems.
I tried tutorial_mixed2b.html that I have at mredkj.com, and it works fine in IE7 Beta 2. I can select one or more items in either list and move them back and forth.
What are the details of the error you're getting?
Posted [6/22/2006 08:56:00 PM]
wrote:
Hi there people! I'm a guy from Argentina and needed to switch da contents of several multiple dropdowns for a project. These tutorials helped me to open wide my eyes. So I wanted to post the code:
http://www.psicofxp.com/forums/desarrollo-web.264/375122-problemita-con-select-option.html#post3152512
Very Thanks!
Marcelo Pedra
aka Kent Brockman
Posted [9/14/2006 11:28:00 AM]
wrote:
I added "<<" & ">>" buttons that moves all Items from one list to the other, and added a boolean that decides if all items should be moved or not.
Theses are the changes :
buttons
<input type="button" value="-->"
onclick="moveOptions(this.form.sel1, this.form.sel2, false);" >
<input type="button" value=">>" onclick="moveOptions(this.form.sel1, this.form.sel2, true);" >
<input type="button" value="<<"
onclick="moveOptions(this.form.sel2, this.form.sel1, true);" >
<input type="button" value="<--"
onclick="moveOptions(this.form.sel2, this.form.sel1, false);" >
Script
function moveOptions(theSelFrom, theSelTo, moveAll)
this line :
if(theSelFrom.options[i].selected)
switch to :
if(theSelFrom.options[i].selected || moveAll)
There you go :)
