Question

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

这是我的代码：

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

您正在解析xml中的每个可用选项。您只是解析行选项的最后一个元素。你需要继续这样做。

HTML CODE

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

<强> CSS

.hide
{
display:none;
}

<强> JQUERY

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

    <script>
    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");



    </script>

这是我的小提琴链接https://jsfiddle.net/wbz5xx03/

Answer 2

您可以使用以下代码嵌套下拉列表。

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 CODE

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

Answer 3

我已根据您的要求创建了自定义jquery插件。

解析给定XML的函数：

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


function parseXMLData(xml) {
    var dataObj = {};
    xmlDoc = $.parseXML(xml),
        $xml = $(xmlDoc);

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

        var obj = {};
        obj["name"] = menuName;
        var childrenArr = [];

        $(sheet).find('row').each(function() {
            var childrenObj = {};
            childrenObj["name"] = $(this).find('col2').text();
            childrenObj["value"] = $(this).find('col1').text();
            childrenArr.push(childrenObj);
        });
        obj["children"] = childrenArr;
        arr.push(obj);
    });
    dataObj["menu"] = arr;
    return dataObj;
}

HTML CODE

<input id="dropdown-selector"/>

Jquery代码

 $("#dropdown-selector").dropdown({
        "menu": parseXMLData(xml)["menu"],
        "name": "Drop Down Menu"
    });

您可以在jquery中以正常方式获取所选下拉值的值，如

$("#dropdown-selector").val();

我在GITHUB中添加了css和js文件，以便使用这个自定义jquery插件。

这是github链接https://github.com/kamalsomu/jquery-dropdown。

在github中包含jquery-dropdown.css和jquery-dropdown.js文件以使其正常工作。

XML的多级html下拉列表

3 个答案: