www.webdeveloper.com
Results 1 to 7 of 7

Thread: Make drop down the same as another?

  1. #1
    Join Date
    Jan 2008
    Location
    ncl,uk
    Posts
    56

    Question Make drop down the same as another?

    If i have in HTML:
    <select id="mainDropDown">
    <option value="Default">Select county</option>
    </select>

    <select id="dropDown1">
    <option value="Avon">Avon</option>
    <option value="Whatever">Whatever</option>
    </select>

    And i want to make the mainDropDown have the same options as dropDown1 what is the best way to do this? I tried just assigning the mainDropDown= dropDown1 element but this doesnt work. Is my only option to delete the children of mainDropDown, store the dropDown1 elements in an array and then re-create the elements of mainDropDown in a for loop?
    If so how do i delete a child and also create another?
    Last edited by sekter; 05-10-2010 at 06:35 AM.

  2. #2
    Join Date
    May 2010
    Posts
    44
    A good place to start would be having an onchange handler on the mainDropDown that triggers a function to set dropDown1's value.

  3. #3
    Join Date
    Jan 2008
    Location
    ncl,uk
    Posts
    56
    Sorry Gullanian but did you actually read the question i posted? This has nothing to do with onChange, as soon as the page loads i want the select to be the same as the other i.e. exactly the same options.

  4. #4
    Join Date
    May 2010
    Posts
    44
    You did not specify anywhere in your original post that you wanted this to happen when the page loads, so I assumed it was every time it changed.

  5. #5
    Join Date
    Jan 2008
    Location
    ncl,uk
    Posts
    56
    My question is not how i can get it to execute via page loading or onChange, it is about actually doing what im asking, which is how do i make a drop down the same as another. How this code gets executed is irrelevant.

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,644
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <select id="mainDropDown">
    <option value="Default">Select county</option>
    </select>
    
    <select id="dropDown1">
    <option value="Avon">Avon</option>
    <option value="Whatever">Whatever</option>
    </select>
    <script type="text/javascript">
    /*<![CDATA[*/
     function Populate(from,to,index){
      to=document.getElementById(to);
      to.options.length=index||0;
      var options=document.getElementById(from).options;
      for (var z0=0;z0<options.length;z0++){
       to.appendChild(options[z0].cloneNode(true));
      }
     }
    
    Populate("dropDown1","mainDropDown",0);
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Jan 2008
    Location
    ncl,uk
    Posts
    56

    <solved>

    Hi vwphillips, thanks alot for that function it is exactly what i need

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