www.webdeveloper.com
Results 1 to 6 of 6

Thread: Copy option list from one select to another

  1. #1
    Join Date
    Jul 2013
    Posts
    3

    Copy option list from one select to another

    Hi,

    I am new to JavaScript and hope you can help me with this.

    I would like to copy the option values from select on another like when a user clicks on a button:

    Select 1:
    <select>
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>
    </select>

    Select 2:
    <select>
    </select>

    How can I manage that when the clicked all options from Select 1 are copied to Select 2 so that in the end both dropdowns show the same options ? Ideally using JavaScript (not jQuery) for this one.

    Many thanks in advance for any help with this.

    Thanks, Tim

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    take this as a draft

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>123</title>
    <style type="text/css">
    body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:14px;text-align:center;}
    select{margin-left:10px;margin-right:10px;}
    </style>
    <script type="text/javascript">
    function doc(id){return document.getElementById(id);}
    function cloneSel(id,targid){
    var count=document.getElementsByTagName(doc(id).tagName).length,
    cl=doc(id).cloneNode(true);
    cl.id=cl.title=id+'_'+count;
    doc(targid).appendChild(cl);
    // just for testing
    cl.onchange=function(){alert(this.id);}
    }
    
    window.onload=function(){
    doc('clon').onclick=function(){
    cloneSel('one','form_area');
    }
    }
    </script>
    </head>
    <body>
    <div id="form_area">
    <select id="one">
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>
    </select>
    </div>
    <br />
    <input type="button" id="clon" value="Clone" />
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Jul 2013
    Posts
    3

    Thanks

    Thanks a lot - works perfect !

    Tim

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    good to hear ))
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,366
    Or an alternative is to name the option lists and use a method like used in creating an option list

    http://stackoverflow.com/questions/9...ist-with-array

    You sub the options array for the select you want to copy and build your second select list by populating it with the data from the first.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  6. #6
    Join Date
    Jul 2013
    Posts
    3
    Hi Padonak,

    your code works fine on its own. I am now trying to combine it with an existing function that I use to dynamically add rows to a table.
    The select to be filled there is under td3. The id of the select to be copied from is policy1000 (not copied here as part of the html code).
    Any idea on how your function could be integrated here ?
    Code:
    	function addRow(in_tbl_name)
    	{
    		var count = 1;
    		var rowsA = document.getElementById("outputTable3").rows.length;
    
    		var tbody = document.getElementById(in_tbl_name).getElementsByTagName("tbody")[0];
    		var row = document.createElement("tr");
    
    		var td1 = document.createElement("td")
    		var strHtml1 = "<input type='text' style='width:97%' name='url[]' onBlur='lowercaseAll(this)' />";
    		td1.innerHTML = strHtml1.replace(/!count!/g,count);
    
    		var td2 = document.createElement("td")
    		var strHtml2 = "<input type='text' style='width:97%' name='email[]' onBlur='lowercaseAll(this)' />";
    		td2.innerHTML = strHtml2.replace(/!count!/g,count);
    
    		var td3 = document.createElement("td")
    		var strHtml3 = "<select style='width:104%' name='policy[]'></select>
    		td3.innerHTML = strHtml3.replace(/!count!/g,count);
    
    		var td4 = document.createElement("td");
    		var strHtml4 = "<input type='text' style='width:97%' name='notes[]' />";
    		td4.innerHTML = strHtml4.replace(/!count!/g,count);
    		td4.setAttribute("colSpan", "2");
    
    		var td5 = document.createElement("td")
    		var strHtml5 = "<button type='button' value='' name='del[]' title='delete row' class='btn' onClick='delRow(this)'><i class='icon-red icon-remove'></i></button></i></button>";
    		td5.innerHTML = strHtml5.replace(/!count!/g,count);
    		td5.setAttribute("class", "txtcntr");
    
    		row.appendChild(td1);
    		row.appendChild(td2);
    		row.appendChild(td3);
    		row.appendChild(td4);
    		row.appendChild(td5);
    
    		count = parseInt(count) + 1;
    		tbody.appendChild(row);
    	}
    Thanks, Tim

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles