SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    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

  2. #2
    Rehab is for quiters! spartan's Avatar
    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

  3. #3
    SitePoint Wizard
    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>

  4. #4
    Rehab is for quiters! spartan's Avatar
    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>
    then all you need is a line of code...

    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

  5. #5
    SitePoint Zealot
    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>
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •