javascript - XML 的多级 html 下拉列表

Question

我是 XML 和 java 脚本新手。我想创建使用 java script 从 XML 获取文本的嵌套下拉菜单。因此，每当用户将鼠标悬停在任何子菜单上时，该特定子菜单的所有选项都将显示在另一个多级下拉列表中。下面给出的照片。图像下面给出:

这是我的代码:

function createSelect(id, className) {
    return $('<select>').attr("id", id).attr("class", className);
}

function appendDropDown(id, text, value, classAttr) {
    $('<option>').val(value).text(text).appendTo(id);
}

var xml = '<root><sheet id="1" name="Submenu1"><row id="1_1"><col1>CODE</col1><col2>Option NAME 1</col2></row><row id="1_2"><col1>46.0</col1><col2>Option NAME 2</col2></row></sheet><sheet id="2" name="Submenu2"><row id="2_1"><col1>CODE</col1><col2>Option NAME 1</col2></row><row id="2_2"><col1>R2</col1><col2>Option NAME 2</col2></row></sheet><sheet id="3"  name="Submenu3"><row id="3_1"><col1>CODE</col1><col2>Option NAME 1</col2></row><row id="3_2"><col1>21.0</col1><col2>Option NAME 2</col2></row></sheet>></root>',
    xmlDoc = $.parseXML(xml),
    $xml = $(xmlDoc);

$xml.find('sheet').each(function() {
    var sheet = $(this);
    var submenuName = $(sheet).attr("name");
    var submenuOptionIdentifier = submenuName + "option";

    //Adding options to Select Tag for Submenus     
    appendDropDown("#subMenuList", submenuName, submenuOptionIdentifier, submenuName);

    //Creating Select Tag for showing options for the submenus
    $("#optionsList").append(createSelect(submenuOptionIdentifier, "hide submenuOptions"));

    //Iterating over each and every row to get the options for the respective submenus     
    $(sheet).find('row').each(function() {
        var option = $(this).find('col2').text();
        var value = $(this).find('col1').text();
        appendDropDown("#" + submenuOptionIdentifier, option, value, submenuOptionIdentifier);
    });
});

//Showing respective options of the submenu on changing any options
$("#subMenuList").change(function() {
    $(".submenuOptions").hide();
    $("#" + $(this).val()).css("display", "block");
}).trigger("change");

.hide
{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrapper">
<select id="subMenuList"></select>
<div id="optionsList"></div>
</div>

请告诉我更多信息。谢谢。

Answer 1

您可以使用以下代码来嵌套下拉菜单。

CSS代码

<style>
* {
    padding: 0px;
    margin: 0px;
}
.dropdown {
    padding: 15px;
    cursor: pointer;
}
.dropdown li {
    list-style-type: none;
    padding: 5px;
}
.dropdown ul {
    box-shadow: -5px 10px 10px #888888;
    border: 1px solid #ddd;
}
.submenu {
    position: relative;
}
.dropdown .menu {
    display: none;
    position: absolute;
    min-width: 120px;
}
.menu .submenu > * {
    display: none;
}
.menu .submenu:hover > .menu {
    display: block;
    float: left;
    left: 100%;
    top: 0%;
}
.dropdown .menu li:hover {
    background-color: #6699FF;
}
.dropdown a {
    text-decoration: none;
    color: black;
    display: inline-block;
    margin-bottom: 4px;
}
.button {
    border-radius: 7px;
    background: #73AD21;
    padding: 10px;
    background-color: #f0ad4e;
}
.arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    display: inline-block;
}
.dropdown .selected-dropdown {
    display: inline-block;
}
</style>

HTML 代码

<div class="dropdown" id="dropdown-container" >
<a id="dropdown"  class="dropdown-click button" >
                Dropdown Menu <span class="arrow-down"></span>
 </a>
<div class="selected-dropdown">
</div>            
</div>

Jquery 代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>

$(document).ready(function() {



    var xml = '<root><sheet id="1" name="Submenu1"><row id="1_1"><col1>CODE</col1><col2>Option NAME 1</col2></row><row id="1_2"><col1>46.0</col1><col2>Option NAME 2</col2></row></sheet><sheet id="2" name="Submenu2"><row id="2_1"><col1>CODE</col1><col2>Option NAME 1</col2></row><row id="2_2"><col1>R2</col1><col2>Option NAME 2</col2></row></sheet><sheet id="3"  name="Submenu3"><row id="3_1"><col1>CODE</col1><col2>Option NAME 1</col2></row><row id="3_2"><col1>21.0</col1><col2>Option NAME 2</col2></row></sheet>></root>',

        xmlDoc = $.parseXML(xml),
        $xml = $(xmlDoc);



    var dropdown = $("#dropdown-container");
    var menu = $("<ul />").attr('class', 'menu');

    $xml.find('sheet').each(function() {
        var sheet = $(this);
        var menuName = $(sheet).attr("name");

        var submenu = $("<li/>").attr("class", "submenu").text(menuName);
        menu.append(submenu);


        var childMenu = $("<ul />").attr('class', 'menu');
        $(sheet).find('row').each(function() {
            var option = $(this).find('col2').text();
            var value = $(this).find('col1').text();
            childMenu.append($("<li />").attr('class', "submenu").attr('data-value', value).text(option));

        });

        submenu.append(childMenu);
        menu.append(submenu);



        $(dropdown).append(menu);
    });



    $(".dropdown-click").click(function(e) {
        e.stopPropagation();
        $(this).parent(".dropdown").children(".menu").toggle();
    });


    $("#dropdown-container .menu li").click(function(e) {
        e.stopPropagation();
        var thisObj = $(this);
        if (thisObj.attr("data-value")) {
            var selectedText = thisObj.text() + " : " + thisObj.attr("data-value");
            $("#dropdown-container .selected-dropdown").text(selectedText);

            $("#dropdown-container").attr("data-value", thisObj.attr("data-value"));

            /*You can also get the value of selected value of the dropdown in the future using                  $("#dropdown-container").attr("data-value");
             */
        }

        $(".dropdown").children(".menu").hide();


    });


    //For closing the menu if clicked outside the menu container
    $("html").click(function() {
        $(".dropdown").children(".menu").hide();
    });

});
</script>

这是我的 JSFiddle 链接 https://jsfiddle.net/oj8f2rwz/