dcsimg
www.webdeveloper.com
Results 1 to 12 of 12

Thread: dynamic dropdown menu

  1. #1
    Join Date
    May 2011
    Posts
    19

    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

    any help?

  2. #2
    Join Date
    May 2011
    Posts
    194

    you want 2 SELECT with event: first SELECT gives the action for second SELECT ?

    Hi,
    you want 2 SELECT with event
    first SELECT gives the action for second SELECT ?

    F.e. Action of first SELECT create a new entry of second select

    <SELECT ID="folderID" SIZE="1" onchange="fnChange(this)"> <!-- first SELECET -->
    <OPTION VALUE="1">folder1
    <OPTION VALUE="2">folder2
    <OPTION VALUE="3" SELECTED>create_new_subfolder_option

    <!-- see fnChange() for append new option -->
    </SELECT>

    <BR>

    <SELECT ID="subfolder_Of_Folder1_ID" SIZE="1"> <!-- second SELECET -->
    <OPTION VALUE="1">folder1_subfolder1
    <OPTION VALUE="2">folder1_subfolder2
    <OPTION VALUE="3" SELECTED>folder1_subfolder3

    <!-- see fnChange() for append new option -->
    </SELECT>


    <SCRIPT LANGUAGE="JScript">

    // if you activate option 3 in <SELECT ID="folderID" then create option 4 oer 5 etc. in <SELECT ID="subfolderOfFolder1ID"

    var ptOption; // pointer of an option object
    var intCounter=3; // next number of actual option

    function fnChange(ptSelect) // event onchange (f.e. after click)
    // ptSelect is pointer only of SELECT object
    {
    // f.e. get text of an option inside SELECT: only from actual selected entry
    // alert(ptSelect.options[ptSelect.selectedIndex].text);

    // if actual selected entry same like option 3
    if(ptSelect.options[ptSelect.selectedIndex].text == "create_new_subfolder_option")
    {
    ptOption = document.createElement("OPTION"); // empty new option

    intCounter++; // get next number of option

    ptOption.text="folder" + intCounter.toString(); // "folder4" then "folder5" ...

    ptOption.value=intCounter.toString(); // "4" then "5"


    ptSelect.add(ptOption); // add new option (append) to SELECT
    }
    }
    </SCRIPT>

  3. #3
    Join Date
    May 2011
    Posts
    19
    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)

  4. #4
    Join Date
    May 2011
    Posts
    194

    SELECT object ?

    Hi,

    drop down is a SELECT object with OPTION (f.e. names of folders) ?

    Topfolder1
    subfolder1_1
    subfolder1_2
    ...
    Topfolder2
    subfolder2_1
    subfolder2_2
    ...

    but in two SELECT's ?

  5. #5
    Join Date
    Dec 2008
    Posts
    488
    This might seem like an over complicated solution, but I wanted to provide you with something scalable. In my code here, you can create a folder structure through json if you wanted to from server side or whatever. your folder structure can be as deep as you need it to be, as long as you follow the same structure at every level.

    The reason I made it scalable is because you could have a 3rd or even 4th dropdown menu with deeper folders, and my function allows you to call itself as a callback, so that when it's completed replacing one select, it will replace the next one based on the first option of the one it just did (if that makes sense)

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    var folders = {
        "topfolder1" : {
            "name" : "Top Folder 1",
            "subfolders" : {
                "subfolder1_1" : {
                    "value" : "subfolder1_1",
                    "name" : "Sub Folder 1_1",
                    "subfolders" : {}
                },
                "subfolder1_2" : {
                    "value" : "subfolder1_2",
                    "name" : "Sub Folder 1_2",
                    "subfolders" : {}
                },
                "subfolder1_3" : {
                    "value" : "subfolder1_3",
                    "name" : "Sub Folder 1_3",
                    "subfolders" : {}
                }
            }
        },
        "topfolder2" : {
            "name" : "Top Folder 2",
            "subfolders" : {
                "subfolder2_1" : {
                    "value" : "subfolder2_1",
                    "name" : "Sub Folder 2_1",
                    "subfolders" : {}
                },
                "subfolder2_2" : {
                    "value" : "subfolder2_2",
                    "name" : "Sub Folder 2_2",
                    "subfolders" : {}
                },
                "subfolder2_3" : {
                    "value" : "subfolder2_3",
                    "name" : "Sub Folder 2_3",
                    "subfolders" : {}
                }
            }
        },
        "topfolder3" : {
            "name" : "Top Folder 3",
            "subfolders" : {
                "subfolder3_1" : {
                    "value" : "subfolder3_1",
                    "name" : "Sub Folder 3_1",
                    "subfolders" : {}
                },
                "subfolder3_2" : {
                    "value" : "subfolder3_2",
                    "name" : "Sub Folder 3_2",
                    "subfolders" : {}
                },
                "subfolder3_3" : {
                    "value" : "subfolder3_3",
                    "name" : "Sub Folder 3_3",
                    "subfolders" : {}
                }
            }
        }
    }
    
    function replaceSelect(folder, elem, callback) {
        var i, selectE = document.createElement("select"), selectO = {};
    
        selectE.name = "subfolder";
        for (i in folders[folder].subfolders) {
            selectO[i] = document.createElement("option");
            selectO[i].value = folders[folder].subfolders[i].value;
            selectO[i].appendChild(document.createTextNode(folders[folder].subfolders[i].name));
            selectE.appendChild(selectO[i]);
        }
        elem.parentNode.replaceChild(selectE, elem);
        if (typeof(callback) === 'function') callback();
        else if (typeof(callback) === 'string') {
            try {
                eval(callback);
            }
            catch(e) {}
        }
    }
    
    function replaceSubfolder(val) {
        replaceSelect(val, document.folderStructure.subfolder)
    }
    </script>
    </head>
    
    <body>
    <form name="folderStructure" action="http://www.domain.com/handlerpage.php" method="get">
        <p>
            <label for="topfolder">Top Folder: </label>
            <select name="topfolder" onchange="replaceSubfolder(this.value);">
                <option value="topfolder1">Top Folder 1</option>
                <option value="topfolder2">Top Folder 2</option>
                <option value="topfolder3">Top Folder 3</option>
            </select>
            &nbsp;
            <label for="subfolder">Sub Folder: </label>
            <select name="subfolder">
                <option value="subfolder1_1">Sub Folder 1_1</option>
                <option value="subfolder1_2">Sub Folder 1_2</option>
                <option value="subfolder1_3">Sub Folder 1_3</option>
            </select>
        </p>
    </form>
    </body>
    </html>
    Let me know if you don't get how to add more drop downs for deeper structure and i'll post some edited code as an example.

  6. #6
    Join Date
    May 2011
    Posts
    19
    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 ,

  7. #7
    Join Date
    Dec 2008
    Posts
    488
    Are you getting your folders from the server or are you manually programming them in?

  8. #8
    Join Date
    May 2011
    Posts
    19
    uploaded it to server,and get it from server

  9. #9
    Join Date
    Dec 2008
    Posts
    488
    So you're using some server side code to output the folders to HTML before the page is sent? Could you be more specific?

  10. #10
    Join Date
    May 2011
    Posts
    19
    yes i have folders name at html then send it useing php code

  11. #11
    Join Date
    Dec 2008
    Posts
    488
    In that case, my method above would be the best method. You just need to create a serverside script to output them in the object format I used above. PhP has some json methods you can use to do this simply and effectively.

  12. #12
    Join Date
    May 2011
    Posts
    19
    ok, i'll try to do it

Thread Information

Users Browsing this Thread

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

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