JSFiddle - React, Tailwind, and code Playground

by sloga

HTML

<div class="report_select" id="style_container_div">
    <label>Year:</label>
    <select size="1" id="year" title="" type="select" name="style">
        <option value="">Select Year</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
    </select>
    <div class="clear"></div>
    <div id="error-message-style"></div>
</div>
<div id="2011" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
    <label>Select a Month:</label>
    <select>
        <option value=""></option>
        <option value="01">January</option>
        <option value="02">February</option>
        <option value="03">March</option>
        <option value="04">April</option>
        <option value="05">May</option>
        <option value="06">June</option>
        <option value="07">July</option>
        <option value="08">August</option>
        <option value="09">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
</div>
<div id="2012" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
    <label>Select a Month:</label>
    <select>
        <option value=""></option>
        <option value="01">January</option>
        <option value="02">February</option>
        <option value="03">March</option>
        <option value="04">April</option>
        <option value="05">May</option>
        <option value="06">June</option>
        <option value="07">July</option>
        <option value="08">August</option>
        <option value="09">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
</div>
<div id="2013" class="style-sub-1" style="display: none;" name="stylesub1"...

JavaScript

$("#year").change(function () {
    var year = $(this).val();
    $('#' + year).show();
   // window.alert(year);
    $year = year;
}),

$("div.style-sub-1 select").change(function () {
    var month = $(this).val();
    $('#days').show();
    //window.alert(month);
    $month = month;
}),

$("div.style-sub-2 select").change(function () {
   var days = $(this).val();
   // window.alert(days);
    $days = days;
    //window.alert($month + '/' + $days + '/' + $year);
    newDate = ($month + '/' + $days + '/' + $year);
//});
document.getElementById("theDate").value = newDate;
});