1

jqueryを使用してドロップダウンを作成したい順不同リストがあります。基本的に、次のような 6 つのドロップダウンを作成したいと考えています。

商品タイプ - ABC、XYZ

reportNames - Report1、Report2

開始日 - 2010 年、2011 年

startMonth - 5 月、6 月

終了日 - 2010 年、2011 年

endMonth - 5月、6月

これらのドロップダウン要素をクリックすると、残りのドロップダウンが更新されます。stackoverflow の 1 人が、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

基本的に、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 に答える
0

私は 3 つの選択を行いました。そこからアイデアが得られるはずです。

主に直接の子セレクターを使用$("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を与えます：

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

ここで動作しています：jsFiddle

2 番目の選択の後、クラス セレクター (.reportType など) を使用していることに注意してください。それらを使用して、要素をより適切に選択できます。

于 2013-09-04T17:12:37.597 に答える