how to create dynamic multi level dropdown in jquery

Question

i have dynamic json structure as mentioned below, need to fill tree like in the html drop down dynamically. there may be sub level, sub sub level, grand sub level ....

[{"Key":"001","Record":{"PrefcatID":"001","parentid":"0","prefname":"org1"}},{"Key":"002","Record":{"PrefcatID":"002","parentid":"0","prefname":"org2"}},{"Key":"003","Record":{"PrefcatID":"003","parentid":"0","prefname":"org3"}},{"Key":"004","Record":{"PrefcatID":"004","parentid":"001","prefname":"suborg1"}},{"Key":"005","Record":{"PrefcatID":"005","parentid":"001","prefname":"suborg2"}},{"Key":"006","Record":{"PrefcatID":"006","parentid":"002","prefname":"suborg1"}},{"Key":"007","Record":{"PrefcatID":"007","parentid":"004","prefname":"subsuborg1"}}]


OrgID   OrgName        parentID
001    org1           0 -----th top
002    org2           0
003    org3           0
004    suborg1        001
005    suborg2       001
006    suborg1       002
007    subsuborg1    004

like as above any number of levels need to be created

code which Im trying is able to display on screen using ul li,I need to display in dropdown list javascript code:

    var menu = "<ul>";
    menu += fun_filldropdown(response, 0, menu);
    menu += "</ul>";
    $("#dropdown").html(menu);


function fun_filldropdown(response, parentid,menu)
{

    var menu = "";      
    var filtered = $.grep(response, function (el) {
        return el.Record.parentid == parentid.toString();
    });
    //alert(JSON.stringify(filtered));


    $.each(filtered, function(i, item) {


        if(item.Record.prefname !== undefined)
            {
            menu += "<li>"+item.Record.prefname+"</li>";    
            }

        if(response !== undefined)
        menu += "<ul>"+fun_filldropdown(response,item.Record.PrefcatID)+"</ul>";


    });


    return menu;

}

Result Screenshot:

can someone help me in putting in dropdown?

The KNVB · Accepted Answer · 2018-04-11 06:25:13Z

1

You may refer here for detail.

It works fine:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="http://www.dynamicdrive.com/dynamicindex1/uldropdown.js"></script>
        <link rel="stylesheet" href="http://www.dynamicdrive.com/dynamicindex1/uldropdown.css"/>
    </head>
    <body>
        <div id="dropdown" class="uldropdown">
        </div>
        <textarea id="output" style="width: 90%;height:100px;margin-top:1em"></textarea>
        <script>
            var response=[{"Key":"001","Record":{"PrefcatID":"001","parentid":"0","prefname":"org1"}},{"Key":"002","Record":{"PrefcatID":"002","parentid":"0","prefname":"org2"}},{"Key":"003","Record":{"PrefcatID":"003","parentid":"0","prefname":"org3"}},{"Key":"004","Record":{"PrefcatID":"004","parentid":"001","prefname":"suborg1"}},{"Key":"005","Record":{"PrefcatID":"005","parentid":"001","prefname":"suborg2"}},{"Key":"006","Record":{"PrefcatID":"006","parentid":"002","prefname":"suborg1"}},{"Key":"007","Record":{"PrefcatID":"007","parentid":"004","prefname":"subsuborg1"}}];
            var menu = "<div class=\"titletext\">Select a Value</div><ul>";
            menu += fun_filldropdown(response, 0, menu);
            menu += "</ul>";
            $("#dropdown").html(menu);
            dropdown1 = new uldropdown({
                dropid: 'dropdown', // id of menu DIV container
                overlay: true, // true = drop down, false = expanding menu
                onSelect($selected){ // when user selects a value
                    $('#output').val('Selected Text: ' + $selected.text() + '\n\n' + 'Selected Value: ' + parseInt($selected.attr('key')))
                    console.log($selected.text()+","+parseInt($selected.attr("key")))
                }
            });
            function fun_filldropdown(response, parentid,menu)
            {
                var menu = "";      
                var filtered = $.grep(response, function (el) {
                    return el.Record.parentid == parentid.toString();
                });
                //alert(JSON.stringify(filtered));


                $.each(filtered, function(i, item) {


                    if(item.Record.prefname !== undefined)
                        {
                        menu += "<li><a key=\""+item.Key+"\">"+item.Record.prefname+"</a></li>";    
                        }

                    if(response !== undefined)
                    menu += "<ul>"+fun_filldropdown(response,item.Record.PrefcatID)+"</ul>";


                });
                return menu;
            }
        </script>
    </body>
</html>

edited Apr 11, 2018 at 6:25

answered Apr 9, 2018 at 9:18

The KNVB

3,8523 gold badges35 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

btc user Over a year ago

that url refers to only single entity dropdown not multilevel

btc user Over a year ago

excellent! Is it possible to get the selected id including the selected text?

btc user Over a year ago

any idea on why it is removing 0's, like the id is 001, but it is taking 1.

The KNVB Over a year ago

Using parseInt() function to do the job.

btc user Over a year ago

i tried this way console.log($selected.text() + " id : "+ parseInt($selected.attr("key"))) showing as NaN

|

Collectives™ on Stack Overflow

how to create dynamic multi level dropdown in jquery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related