1

有一个无序列表，我想使用 jquery 创建下拉列表。基本上我想创建六个这样的下拉菜单：

产品类型 - ABC、XYZ

报告名称 - 报告 1、报告 2

开始日期 - 2010, 2011

startMonth - 五月，六月

结束日期 - 2010, 2011

endMonth - 五月，六月

单击这些下拉元素将更新其余的下拉列表。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>

4

2 回答 2

0

我做了三个选择，你应该从那里有一个想法：

您应该主要使用直接子选择器$("parent > children") 来选择直接 li 和 span。而且由于这些东西都没有 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：

<ul id="root" class="decisionTree productType">

它在这里工作：jsFiddle

请注意，在第二次选择之后，我使用了类选择器（如 .reportType）。您可以开始使用它们来更好地选择您的元素。

于 2013-09-04T17:12:37.597 回答
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());
});

通过混合和匹配这些片段，您应该能够将数组拼凑在一起以制作下拉菜单。如果您需要进一步的帮助，请发表评论，我会尽力提供进一步的帮助。

于 2013-09-04T16:36:46.977 回答