javascript - how to hide table rows in 2 different tables selecting dropdown option -

i want hide table rows when select dropdown option in first table drop down there.options 1.current state 2.future state

if select current state according in 2nd , 3rd table rows should show & hide.. using id tr..as current future.

< script >    $(document).ready(function() {      $("#curfut").on("change",        function() {          $("#future").hide();          $("#current").show();        });        }); < /script>

<table>    <tr>      <td>        <select id="curfut">          <option value="select"></option>          <option value="current">current</option>          <option value="future">future</option>        </select>      </td>    </tr>  </table>    <table>    <div id="current"      <tr>        <td>          <input type=radio name="reditblue" value="reditbluey" required />yes          <input type=radio name="reditblue" value="reditbluen" />no        </td>      </tr>      <div id="future">        <tr>          <td>            <input type=radio name="implementationplan" value="implementationplany" required />yes            <input type=radio name="implementationplan" value="implementationplann" />no          </td>        </tr>      </div>      </tr>  </table>    <table>    <div id="current>    <tr>  	<td>what potential cognizant bi identified vsm?($mm)</td>					  	<td><input type=" text " name="clientbi " id="clientbi " required> </td>  </tr>      </div>

you need make correction in html , javascript.

i have prepare demo. please check jsfiddle

check out below code might want this:

note : both option enable. can make changes according requirement.

html :

<table>   <tr>     <td>       <select id="curfut">         <option value="select"></option>         <option value="current">current</option>         <option value="future">future</option>       </select>     </td>   </tr> </table>  <table id="current">      <tr>       <td>         <input type=radio name="reditblue" value="reditbluey" required />yes         <input type=radio name="reditblue" value="reditbluen" />no       </td>     </tr>        <tr>         <td>           <input type=radio name="implementationplan" value="implementationplany" required />yes           <input type=radio name="implementationplan" value="implementationplann" />no         </td>       </tr>   </table>  <table id="future">    <tr>     <td>what potential cognizant bi identified vsm?($mm)</td>                       <td><input type="text" name="clientbi " id="clientbi " required> </td> </tr> </table>   

javascript :

$(document).ready(function() {     $("#curfut").on("change",       function() {         if($(this).val()=="current")                 {           $("#future").hide();           $("#current").show();         }         else if($(this).val()=="future")                  {           $("#future").show();           $("#current").hide();         }       }); });