有一个无序列表，我想使用jquery创建下拉列表。 基本上我想创建六个这样的下拉：
productType - ABC，XYZ
reportNames - Report1，Report2
startDate - 2010,2011
startMonth - May，June
endDate - 2010,2011
endMonth - May，June
点击这些下拉元素将更新其余的下拉菜单。 stackoverflow中的一个人帮助我从JSON对象创建这些下拉列表。但现在我想从UL和LI那里得到同样的东西。请帮帮我!!
以下是从JSON创建的演示的演示 - http://jsfiddle.net/Lnv9d/7/
这是无序列表 -
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<style>
<!-- .decisionTree {
display:none
}
-->
</style>
</head>
<body>
<ul class="decisionTree productType">
<li><span>ABC</span>
<ul class="reportType">
<li><span>Report 1</span>
<ul class="reportYearStart">
<li><span>2011</span>
<ul class="reportMonthStart">
<li><span>July</span>
</li>
<li><span>June</span>
</li>
</ul>
</li>
<li><span>2010</span>
<ul class="reportMonthStart">
<li><span>December</span>
</li>
<li><span>November</span>
</li>
</ul>
</li>
</ul>
<ul class="reportYear">
<li><span>2011</span>
<ul class="reportMonth">
<li><span>July</span>
</li>
<li><span>June</span>
</li>
</ul>
</li>
<li><span>2010</span>
<ul class="reportMonth">
<li><span>December</span>
</li>
<li><span>November</span>
</li>
</ul>
</li>
</ul>
</li>
<li><span>Report 2</span>
<ul class="reportYearStart">
<li><span>2011</span>
<ul class="reportMonthStart">
<li><span>July</span>
</li>
<li><span>June</span>
</li>
</ul>
</li>
<li><span>2010</span>
<ul class="reportMonthStart">
<li><span>October</span>
</li>
<li><span>September</span>
</li>
</ul>
</li>
</ul>
<ul class="reportYear">
<li><span>2011</span>
<ul class="reportMonth">
<li><span>April</span>
</li>
<li><span>March</span>
</li>
</ul>
</li>
<li><span>2010</span>
<ul class="reportMonth">
<li><span>August</span>
</li>
<li><span>July</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><span>XYZ</span>
<ul class="reportType">
<li><span>Report 3</span>
<ul class="reportYearStart">
<li><span>2020</span>
<ul class="reportMonthStart">
<li><span>July</span>
</li>
<li><span>June</span>
</li>
</ul>
</li>
<li><span>2021</span>
<ul class="reportMonthStart">
<li><span>December</span>
</li>
<li><span>November</span>
</li>
</ul>
</li>
</ul>
<ul class="reportYear">
<li><span>2022</span>
<ul class="reportMonth">
<li><span>July</span>
</li>
<li><span>June</span>
</li>
</ul>
</li>
<li><span>2023</span>
<ul class="reportMonth">
<li><span>December</span>
</li>
<li><span>November</span>
</li>
</ul>
</li>
</ul>
</li>
<li><span>Report 4</span>
<ul class="reportYearStart">
<li><span>2024</span>
<ul class="reportMonthStart">
<li><span>July</span>
</li>
<li><span>June</span>
</li>
</ul>
</li>
<li><span>2025</span>
<ul class="reportMonthStart">
<li><span>October</span>
</li>
<li><span>September</span>
</li>
</ul>
</li>
</ul>
<ul class="reportYear">
<li><span>2026</span>
<ul class="reportMonth">
<li><span>April</span>
</li>
<li><span>March</span>
</li>
</ul>
</li>
<li><span>2027</span>
<ul class="reportMonth">
<li><span>August</span>
</li>
<li><span>July</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
答案 0 :(得分：0)
基本上你需要走DOM树并用你的数据填充一系列数组;然后，您可以使用与来自JSON的数据相同的方式进行交互。我将留给您的确切格式和样式，但方法如下。
假设你有这样的数据：
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
您可以通过执行以下操作将其枚举到javascript数组中：
var items = [];
$('ul > li').each(function() {
items.push($(this).text());
});
如果您想要分开混合物品，可以执行以下操作：
<ul>
<li class='a1'>Item 1</li>
<li class='a2'>Item 2</li>
<li class='a1'>Item 3</li>
<li class='a2'>Item 4</li>
</ul>
和javascript：
var a1items = [],
a2items = [];
$('ul > li').each(function() {
a1items .push($('.a1', $(this)).text());
a2items .push($('.a2', $(this)).text());
});
通过混合和匹配这些片段，您应该能够将阵列拼凑在一起以进行下拉。如果您需要进一步的帮助，请发表评论，我会尽力提供帮助。
答案 1 :(得分：0)
我做了三个选择，你应该从那里得到一个想法：
你应该主要使用直接儿童选择器$("parent > children")
选择直接li和跨度。由于这些东西都没有id，你需要:contains选择器来查找带有特定文本的跨度。
$("#root > li > span").each(function(){
$("#productType").append("<option value='" + $(this).text() + "'>" + $(this).text() + "</option>");
});
$("#productType").on("change",function(){
var selected = $(this).val(); //selected value
$("#reportName").empty(); //clears reports
$("#reportName").append("<option value='-1'>Select</option>"); //adds an empty item
//selector: selects from the li's with the text (ABC, or XYZ), - select its span children
$("li:contains('" + selected + "') > ul > li > span").each(function()
{
$("#reportName").append("<option value='" + $(this).text() + "'>" + $(this).text() + "</option>");
});
});
$("#reportName").on("change",function(){
var selected = $(this).val(); //selected value
$("#startDate").empty(); //clears reports
$("#startDate").append("<option value='-1'>Select</option>"); //adds an empty item
//selector: selects from the li's with the text, - select its span children
$(".reportType > li:contains('" + selected + "') > ul > li > span").each(function()
{
$("#startDate").append("<option value='" + $(this).text() + "'>" + $(this).text() + "</option>");
});
});
给你的主要信息：
<ul id="root" class="decisionTree productType">
这里有效：jsFiddle
请注意，在第二次选择之后我使用了类选择器（如.reportType）。您可以开始使用它们来更好地选择元素。