Ravi Kumar Ravi Kumar - 24 days ago 8
HTML Question

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

i want to hide the table rows when i select the dropdown option
In first table drop down is there.options are
1.current state
2.future state

If i select current state according to that the in 2nd and 3rd table rows should be show & hide.. for that i am using id for that tr..as current as well as 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 is the potential Cognizant BI identified from this VSM?($MM)</td>
<td><input type=" text " name="clientBI " id="clientBI " required> </td>
</tr>
</div>




Answer

You need make some correction in your html and javascript.

i have prepare Demo. please check JSfiddle

Check out below code you might want something like this:

Note : initially both option will be enable. you can make changes according to your 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 is the potential Cognizant BI identified from this 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();
        }
      });
});
Comments