Question

我有动态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;

}

结果屏幕截图：

有人可以帮助我进行下拉吗？

Answer 1

您可以参考here了解详情。

工作正常：

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

如何在jquery中创建动态多级下拉列表

1 个答案: