gpt4 book ai didi

javascript - XML 的多级 html 下拉列表

转载 作者:行者123 更新时间:2023-11-28 18:50:27 24 4
gpt4 key购买 nike

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

这是我的代码:

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>

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

最佳答案

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

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/

关于javascript - XML 的多级 html 下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34562229/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com