JSFiddle - React, Tailwind, and code Playground

by hescano

HTML

<select id="productType"><option value="-1">Select</option></select>
<select id="reportName"></select>
<select id="startDate"></select>

<ul id="root" 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">
                   ...

JavaScript

$("#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 (ABC, or XYZ), - select its span children
    $(".reportType > li:contains('" + selected + "') > ul > li > span").each(function()
    {
        $("#startDate").append("<option value='" + $(this).text() + "'>" + $(this).text() + "</option>");
    });
});