JSFiddle - React, Tailwind, and code Playground

by reporter

HTML

<table>
<tr>
    <td align='left'>Date Period:</td>
    <td>
        <select name=tbdateselect id=tbdateselect style='width:160px;' onChange="changeS(this.id)">
            <option value=''>-</option>
            <option value='Last Month'>Last Month</option>
            <option value='Last (rolling) Month'>Last (rolling) Month</option>
            <option value='Last 6 Months'>Last 6 Months</option>
            <option value='Last 12 Months'>Last 12 Months</option>
            <option value='Last (rolling) 12 Months'>Last (rolling) 12 Months</option>
            <option value='Date Range'>Date Range</option>
        </select>
   </td>
</tr>
<tr class="tohide">
    <td align='left'>Date From:</td>
    <td><input type=text name=tbdatefrom size=23 value=''><font color=gray><i> yyyy-mm-dd</i></font></td>
</tr>
<tr class="tohide">
    <td align='left'>Date To:</td>
    <td><input type=text name=tbdateto size=23 value=''><font color=gray><i> yyyy-mm-dd</i></font></td>
</tr>
</table>

CSS

.tohide {display: none;}

JavaScript

function changeS(startObjectId)
{
    var startObject = $("#"+startObjectId);
    var selectValue = $("#"+startObjectId+" option:selected").val();

    if (selectValue == "Date Range")
    {
        $(startObject).parents("table:first").find(".tohide").each(function()
        {
           $(this).removeClass("tohide").addClass("dummyClass");
        });
    } else {
        $(startObject).parents("table:first").find(".dummyClass").each(function()
        {
           $(this).addClass("tohide").removeClass("dummyClass");
        });                                                                   
   }
}