Question 221944 in PHP Question posted in
Official manual can be found here.

Php – How to Hide the tr when the option is selected

The requirement is to hide the msc tr and show the bsc tr when the Undergraduate Program Option is selected. When Postgraduate program option is selected the bsc tr should be hidden and msc tr should be there. Thank you in advance!

<tr>
  <td>Select Program</td>
  <td>
    <select name="prog" id="prog">
       <option value="0">Undergraduate Program</option>
       <option value="1">Postgraduate Program</option>
    </select>
  </td>
</tr>
<tr id="msc">
  <td>Masters : </td>
  <td>
     <select name="major" id="major">
       <option>MSC</option>
       <option>MSC2</option>
     </select>
  </td>
</tr>
<tr id="bsc">
  <td>Bachelors : </td>
  <td>
    <select name="major" id="major">
       <option>BSC</option>
       <option>BSC2</option>
    </select>
  </td>
</tr>
Tags:

3

Answers


  1. 0

    You can try the following way:

    <script>
  document.addEventListener("DOMContentLoaded", function () {
    //get the elements for references
    const progSelect = document.getElementById("prog");
    const mscRow = document.getElementById("msc");
    const bscRow = document.getElementById("bsc");

    //add event listener to the select element
    progSelect.addEventListener("change", function () {
      //check the selected option value
      //if Undergraduate is selected, hide mscRow and show bscRow
      //if Postgraduate is selected, show mscRow and hide bscRow
      mscRow.style.display = progSelect.value === "0" ? "none" : "table-row";
      bscRow.style.display = progSelect.value === "0" ? "table-row" : "none";
    });

    //hide the msc tr and show the bsc tr initially
    mscRow.style.display = "none";
    bscRow.style.display = "table-row";
  });
</script>

<table>
  <tr>
    <td>Select Program</td>
    <td>
    <select name="prog" id="prog">
        <option value="0">Undergraduate Program</option>
        <option value="1">Postgraduate Program</option>    
    </select></td>
  </tr>

  <tr id="msc">
    <td>Masters : </td>
    <td>
        <select name="major" id="major">
            <option>MSC</option>
            <option>MSC2</option>
        </select>
    </td>

  </tr>

  <tr id="bsc">
    <td>Bachelors : </td>
    <td>
        <select name="major" id="major">
            <option>BSC</option>
            <option>BSC2</option>
        </select>
    </td>            
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    Use the following code

        <tr>
                <td>Select Program</td>
                <td>
                <select name="prog" id="prog" onChange="showHide();">
                    <option selected value="0">Undergraduate Program</option>
                    <option value="1">Postgraduate Program</option>    
                </select></td>
</tr>
            
<tr id="msc" style="display:none;">
                <td>Masters : </td>
                <td>
                    <select name="major" id="major">
                        <option>MSC</option>
                        <option>MSC2</option>
                    </select>
                </td>
            
</tr>
            
<tr id="bsc" style="display:block;">
                <td>Bachelors : </td>
                <td>
                    <select name="major" id="major">
                        <option>BSC</option>
                        <option>BSC2</option>
                    </select>
                </td>            
</tr>

<script type="text/javascript" language="javascript">
function showHide(){
    var e = document.getElementById("prog");
    var selVal = e.value;
    if (selVal=="0"){
        document.getElementById("msc").style.display = "none";
        document.getElementById("bsc").style.display = "block";
    }else{
        document.getElementById("bsc").style.display = "none";
        document.getElementById("msc").style.display = "block";
    }
}

</script>
    Login or Signup to reply.
  3. 0

    use the code its help you to do what you want

        $('#msc').hide();
  $('#bsc').show();

$('#prog').on('change',function(){
  if($('#prog').val()==1){
  $('#msc').show();
  $('#bsc').hide();
  }else{
    $('#msc').hide();
  $('#bsc').show();
  }
})
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
   <tr>
      <td>Select Program</td>
      <td>
         <select name="prog" id="prog">
            <option value="0">Undergraduate Program</option>
            <option value="1">Postgraduate Program</option>
         </select>
      </td>
   </tr>
   <tr id="msc">
      <td>Masters : </td>
      <td>
         <select name="major" id="major">
            <option>MSC</option>
            <option>MSC2</option>
         </select>
      </td>
   </tr>
   <tr id="bsc">
      <td>Bachelors : </td>
      <td>
         <select name="major" id="major">
            <option>BSC</option>
            <option>BSC2</option>
         </select>
      </td>
   </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search