Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    dynamic dropdown menu

    Hi
    I have two drop down menus I want the first one has name of the folders and when change the other dropdown has names of the sub-folders of this folder

    i have the top folders at the first dropdown
    how can i have the subfolders at the second when change first?

    the problem is how to open folder

    if i have folders

    aaaaa has subfolders(1111,2222,2233)
    bbbbb has subfolders(3333,4422,2433)
    ccccc has subfolders(1131,2232,2532)

    and each folder has subfolders how can i have name of these subfolders when change the topfolders(aaaaa,
    bbbbb,
    ccccc)


    I have more than 1000 top folders and eachone have 10 subfolders
    already i have all topfolders at first dropdown ,i want to have subfolders at second automatic ,
    any help??

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,893
    Thanks
    202
    Thanked 2,528 Times in 2,506 Posts
    Try this as an example - but with 1000 folders each with 10 sub-folders you ought to do this using server-side coding.

    Code:
    <html> 
    <head> 
    <script type = "text/javascript">
     
    function setOptions(opt) { 
    var sel2 = document.form1.select2; 
    sel2.options.length = 0; 
    
    if (opt == "1") { 
    sel2.options[sel2.options.length] = new Option('Apple'); 
    sel2.options[sel2.options.length] = new Option('Pear'); 
    sel2.options[sel2.options.length] = new Option('Strawberry'); 
    sel2.options[sel2.options.length] = new Option('Banana');
    sel2.options[sel2.options.length] = new Option('Orange');
    sel2.options[sel2.options.length] = new Option('Watermelon');
    } 
    
    if (opt == "2") { 
    sel2.options[sel2.options.length] = new Option('Carrots'); 
    sel2.options[sel2.options.length] = new Option('Potato'); 
    sel2.options[sel2.options.length] = new Option('Peas');
    sel2.options[sel2.options.length] = new Option('Beans');
    sel2.options[sel2.options.length] = new Option('Cauliflower');
    } 
    
    if (opt == "3") { 
    sel2.options[sel2.options.length] = new Option('Chicken'); 
    sel2.options[sel2.options.length] = new Option('Veal');
    sel2.options[sel2.options.length] = new Option('Beef'); 
    sel2.options[sel2.options.length] = new Option('Pork'); 
    } 
    
    if (opt == "4") { 
    sel2.options[sel2.options.length] = new Option('Cod'); 
    sel2.options[sel2.options.length] = new Option('Haddock');
    sel2.options[sel2.options.length] = new Option('Salmon'); 
    sel2.options[sel2.options.length] = new Option('Plaice'); 
    sel2.options[sel2.options.length] = new Option('Kippers'); 
    } 
    
    } 
    
    function getChoice() {
    var s1 = document.form1.select1.options[form1.select1.selectedIndex].text;
    var s2 = document.form1.select2.options[form1.select2.selectedIndex].text;
    alert ("You selected:   " + s1 + " - " + s2);
    }
    
    </script>
     
    </head> 
    <body> 
    
    <form name="form1"> 
    <select name="select1" size="1" onChange="setOptions(document.form1.select1.options[document.form1.select1.selectedIndex].value);"> 
    <option value="1">Fruit</option> 
    <option value="2">Vegetable</option> 
    <option value="3">Meat</option> 
    <option value="4">Fish</option> 
    </select> 
    <br> 
    <br> 
    <select name="select2" size="1"> 
    <option>Apple</option> 
    <option>Pear</option> 
    <option>Strawberry</option> 
    <option>Banana</option>
    <option>Orange</option>
    <option>Watermelon</option>
    </select> 
    
    <input type = "button" value = "You selected" onclick = "getChoice()">
    </form> 
    
    </body> 
    </html>

    We are all going to die at least once. - Author interviewed on BBC Radio 4

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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