如何在jQuery中创建动态多级下拉菜单

Question

如何在jQuery中创建动态多级下拉菜单

3

我有一个动态的JSON结构，如下所示，需要动态地像HTML下拉框中一样填充树形结构。可能会有子级，子子级，大子级等...

[{"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

与上述类似，需要创建任意数量的级别

我尝试使用ul li在屏幕上显示代码，但我需要在下拉列表中显示。 JavaScript代码：

    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;

}

结果截图：

请问有人可以帮我把下拉菜单放进去吗？

- btc user

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- The KNVB · Accepted Answer

您可以参考此处获取详细信息。

它运行良好：

<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>