SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
Thread: Duplicating Selection Box
-
Aug 14, 2002, 06:18 #1
- Join Date
- Aug 2000
- Posts
- 113
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Duplicating Selection Box
I have a Drop Down select box on a form that is being populated from a database using a Server Side Script (VBScript). What I would like to do is to have a button on the form that creates another copy of the Select box containing the same selection options.
I have seen DHTML scripts to add another text box to a form, but I'm not sure how to copy a select box.
Can anyone help?
Cheers
-
Aug 15, 2002, 04:01 #2
- Join Date
- Apr 2002
- Location
- Cape Town, South Africa
- Posts
- 343
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Gelf...the important property to look at here is .innerHTML since thats essentially what you want to copy... the html inside.
so you could have a empty <div> and then all you do is, when the user click the button, set the divs innerhtml to be equal to the selectboxs .innerhtml
you might just need to check what exactly the innerHTML of a <select> box is... it might only include the option tags and not the actual <select> and </select> tags...
hope that helps
enjoy!Spartan
---------------------
It's like our sergeant told us before one trip into the jungle. Men! Fifty of you are leaving on a mission. Twenty-five of you ain't coming back.
-Mr.Payne
-
Aug 15, 2002, 05:51 #3
- Join Date
- Jan 2001
- Location
- Milton Keynes, UK
- Posts
- 1,011
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You could use cloneNode. I'voe got no idea what the browser support for it is like though.
Someone else may be able to suggest a better way of getting the new select object into the page, than what I've used below.
Code:<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Clone select</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <script type="text/javascript"> function cloneSelect(origId, newId, newName, containerId) { var objSelect = document.getElementById(origId); var objContainer = document.getElementById(containerId); if (objContainer != null && objSelect != null) { //Clone select and add to page var objNewSelect = objSelect.cloneNode(true); objContainer.insertBefore(objNewSelect); //Set selected options for (i = 0; i < objSelect.options.length; i++) { if (objSelect.options[i].selected == true) objNewSelect.options[i].selected = true; } //Set ID and name of new select objNewSelect.id = newId; objNewSelect.name = newName; } } </script> </head> <body> <div> <select name="list1" id="list1" size="5" multiple> <option value="1">value 1</option> <option value="2">value 2</option> <option value="3">value 3</option> <option value="4">value 4</option> </select> </div> <div id="list2box"></div> <br> <input type="button" value="Clone Select" onclick="cloneSelect('list1', 'list2', 'list2', 'list2box'); return false;"> </body> </html>
-
Aug 15, 2002, 06:05 #4
- Join Date
- Apr 2002
- Location
- Cape Town, South Africa
- Posts
- 343
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
interesting, but that seems like overkill to me.
I would still try to get the innerHTML thing working.
lets say you had one div with the listbox in it. and another empty div, like so....
Code:<div id=div1> <select> <option></option> </select> </div> <div id=div2> </div>
Code:document.getElementById("div2").innerHTML = document.getElementById("div1").innerHTML
Spartan
---------------------
It's like our sergeant told us before one trip into the jungle. Men! Fifty of you are leaving on a mission. Twenty-five of you ain't coming back.
-Mr.Payne
-
Aug 15, 2002, 06:16 #5
- Join Date
- Aug 2000
- Posts
- 113
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for the advice guys, I like the .innerhtml idea but I think it might be a bit too simple for my requirements (Which I probably should have explained better).
What I'd like to do is have a list box, for example:
Code:<select name="list(1)" id="list1" size="5" multiple> <option value="1">value 1</option> <option value="2">value 2</option> <option value="3">value 3</option> <option value="4">value 4</option> </select>
Code:<select name="list(2)" id="list1" size="5" multiple> <option value="1">value 1</option> <option value="2">value 2</option> <option value="3">value 3</option> <option value="4">value 4</option> </select> .... <select name="list(3)" id="list1" size="5" multiple> <option value="1">value 1</option> <option value="2">value 2</option> <option value="3">value 3</option> <option value="4">value 4</option> </select>
Bookmarks