Duplicating Selection Box

**gelf** · Aug 14, 2002, 05:18

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

**spartan** · Aug 15, 2002, 03:01

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!

**shane** · Aug 15, 2002, 04:51

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>

**spartan** · Aug 15, 2002, 05:05

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>

then all you need is a line of code...

Code:

document.getElementById("div2").innerHTML = document.getElementById("div1").innerHTML

**gelf** · Aug 15, 2002, 05:16

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>

and by clicking a button on the form, dynamically add a second, third, fourth or more copy of the listbox, as such.

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>

The SitePoint Forums have moved.

User Tag List

Thread: Duplicating Selection Box

Thread Tools

Display

Duplicating Selection Box

Bookmarks

Bookmarks

Posting Permissions