XML中的多级html下拉菜单

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

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

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/

Answer 2

您正在解析XML中可用的每个选项。您只解析行选项的最后一个元素。你需要继续下去。

HTML代码

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

<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文件以使其工作。