Show hide a <tr> with Javascript base on a drop down selection.

[agr8lemon]

Hello!

As the title says, I'm trying to toggle a <tr> element of form based on the selected value of a drop down box.

Here is my current code for the dop down:

<tr>
  <td><img src="require.gif" align="center" width="7" height="5"> Employee Type</td><td colspan="3"><select name="type">
      <option value="Please Select an employee type:">Please Select an employee type:</option>
      <option value="Department Transfer">Department Transfer</option>
      <option value="Previous Student">Previous Student</option>
      <option value="Physician / P.A.">Physician / P.A.</option>
      <option value="Volunteer">Volunteer</option>
      <option value="Update Employee">Update Current Employee</option>
      <option value="New Employee">New Employee</option>      
  </td>
</tr>

Under that, I'd like to show/hide this row:

<tr>
     <td>NPI Number</td><<input name="npi" size="10" type="text">
</tr>

I'd like to have it so if the user selects "Physician / P.A." in the drop down, that the hidden field show up.

Any help would be great! thank you!

[Airshow]

Agr8lemon,

This is pretty simple if you just want to show a single table row in response to a particular menu selection and to hide it when other selections are made.

It's slightly more challenging to write efficient code that will handle each menu selection to show a number of table rows and hide others.

Here's a way to do it (certainly not the only way). I have animated "Physician / P.A." and "Volunteer" which should give you enough to spot the pattern and do the rest, as necessary, for yourself.

var $ = Object.prototype.$ = function(id){ return document.getElementById ? document.getElementById(id) : document.all ? document.all[id] : null };//Thanks to Essential
function showHideTableRow(tr, show){
	if(!tr){ return false; }
	try{
		tr.style.display = (show) ? 'table-row' : 'none';
		return true;
	}
	catch(e){
		tr.style.display = (show) ? 'block' : 'none';
		return true;
	}
}
function selAction(sel){
	for(var i=0; i<sel.options.length; i++){
		var trID = sel.options[i].getAttribute('bindTo');
		if(trID !== ''){
			var tr = $(sel.options[i].getAttribute('bindTo'));
			var rtnVal = showHideTableRow(tr, i == sel.selectedIndex);
//			if(!rtnVal){ alert('Table group "' + sel[sel.selectedIndex].value + '" not found'); }//Uncomment this to debug
		}
	}
}

<table>
<tr>
<td><img src="require.gif" align="center" width="7" height="5"> Employee Type</td>
<td colspan="3">
<select name="type" onchange="selAction(this);">
  <option bindTo="" value="Please Select an employee type:">Please Select an employee type:</option>
  <option bindTo="trDeptTrans" value="Department Transfer">Department Transfer</option>
  <option bindTo="trPrevStu" value="Previous Student">Previous Student</option>
  <option bindTo="trNPI" value="Physician / P.A.">Physician / P.A.</option>
  <option bindTo="trVol" value="Volunteer">Volunteer</option>
  <option bindTo="trUpdEmp" value="Update Employee">Update Current Employee</option>
  <option bindTo="trNewEmp" value="New Employee">New Employee</option>
</select>
</td>
</tr>

<tr>
<td>Permanently displayed row</td>
<td><input name="perm" size="10" type="text"></td>
</tr>

<tbody id="trNPI" style="display:none;">
<tr>
<td>NPI Number</td>
<td><input name="npi" size="10" type="text"></td>
</tr>
</tbody>

<tbody id="trVol" style="display:none;">
<tr>
<td>Volunteer Number</td>
<td><input name="volNum" size="10" type="text"></td>
</tr>
<tr>
<td>Volunteer Type</td>
<td><input name="volType" size="10" type="text"></td>
</tr>
</tbody>

</table>

Notes:

1. In the table we use <tbody id="..."> to create addressable groups of table row(s).
2. In the menu options we use the custom attribute "bindTo" to specify which <tbody> to show.

Airshow

[Airshow]

I have just tested the above in IE, Firefox and Opera and found two bugs.

Bug 1: FF and Opera both fail to align the cells in table groups properly if they are hidden then redisplayed.

Bug 2: With repeated showing/hiding of table groups, FF inserts inceasing vertical gap(s) within the table.

There may be workarounds. I'll see what I can do.

IE is well mannered in both respects.

Airshow

[Airshow]

OK, a simplification of the function showHideTableRow fixes it.

function showHideTableRow(tr, show){
	if(!tr){ return false; }
	tr.style.display = (show) ? '' : 'none';
	return true;
}

Airshow

[agr8lemon]

This worked out great! It looks great, and I learned new code.

Thank you very much!

[Airshow]

agr8,

That's cool. I'm so pleased you learned from my code. That makes it all worth while. Some folks seem to just accept this stuff without learning from it.

Best of luck with your project, and please come back here if you get stuck again.

Airshow

[hashimu]

I have tried the codes but not working, can you please send a complete cod for it?

Agr8lemon,

This is pretty simple if you just want to show a single table row in response to a particular menu selection and to hide it when other selections are made.

It's slightly more challenging to write efficient code that will handle each menu selection to show a number of table rows and hide others.

Here's a way to do it (certainly not the only way). I have animated "Physician / P.A." and "Volunteer" which should give you enough to spot the pattern and do the rest, as necessary, for yourself.

var $ = Object.prototype.$ = function(id){ return document.getElementById ? document.getElementById(id) : document.all ? document.all[id] : null };//Thanks to Essential
function showHideTableRow(tr, show){
	if(!tr){ return false; }
	try{
		tr.style.display = (show) ? 'table-row' : 'none';
		return true;
	}
	catch(e){
		tr.style.display = (show) ? 'block' : 'none';
		return true;
	}
}
function selAction(sel){
	for(var i=0; i<sel.options.length; i++){
		var trID = sel.options[i].getAttribute('bindTo');
		if(trID !== ''){
			var tr = $(sel.options[i].getAttribute('bindTo'));
			var rtnVal = showHideTableRow(tr, i == sel.selectedIndex);
//			if(!rtnVal){ alert('Table group "' + sel[sel.selectedIndex].value + '" not found'); }//Uncomment this to debug
		}
	}
}

<table>
<tr>
<td><img src="require.gif" align="center" width="7" height="5"> Employee Type</td>
<td colspan="3">
<select name="type" onchange="selAction(this);">
  <option bindTo="" value="Please Select an employee type:">Please Select an employee type:</option>
  <option bindTo="trDeptTrans" value="Department Transfer">Department Transfer</option>
  <option bindTo="trPrevStu" value="Previous Student">Previous Student</option>
  <option bindTo="trNPI" value="Physician / P.A.">Physician / P.A.</option>
  <option bindTo="trVol" value="Volunteer">Volunteer</option>
  <option bindTo="trUpdEmp" value="Update Employee">Update Current Employee</option>
  <option bindTo="trNewEmp" value="New Employee">New Employee</option>
</select>
</td>
</tr>

<tr>
<td>Permanently displayed row</td>
<td><input name="perm" size="10" type="text"></td>
</tr>

<tbody id="trNPI" style="display:none;">
<tr>
<td>NPI Number</td>
<td><input name="npi" size="10" type="text"></td>
</tr>
</tbody>

<tbody id="trVol" style="display:none;">
<tr>
<td>Volunteer Number</td>
<td><input name="volNum" size="10" type="text"></td>
</tr>
<tr>
<td>Volunteer Type</td>
<td><input name="volType" size="10" type="text"></td>
</tr>
</tbody>

</table>

Notes:

1. In the table we use <tbody id="..."> to create addressable groups of table row(s).
2. In the menu options we use the custom attribute "bindTo" to specify which <tbody> to show.

Airshow

[fxm]

complete code

Here is a complete implementation using css and classes.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <style type="text/css">
		.vol {display:none}
		.npi {display:none}
    </style>
    <script type="text/javascript">
        function showHide(cls, show) {

            // browser-compatibility 
            var rule = document.styleSheets[0].rules ? document.styleSheets[0].rules : document.styleSheets[0].cssRules;

            for (var j = 0; j < rule.length; j++) {
                if (rule[j].selectorText == "." + cls) { //find css selector
                    rule[j].style.display = (show) ? 'block' : 'none';
                }
            }
        }

        function selAction(sel) {
            for (var i = 0; i < sel.options.length; i++) {
                showHide(sel.options[i].value, i == sel.selectedIndex);
            }
        }
    </script>
    <title></title>
  </head>
  <body>
    <table>
      <tr>
        <td>
          <img src="require.gif" align="center" width="7" height=
          "5"> Employee Type
        </td>
        <td colspan="3">
          <select name="type" onchange="selAction(this);">
            <option value="et">
              Please Select an employee type:
            </option>
            <option value="dt">
              Department Transfer
            </option>
            <option value="ps">
              Previous Student
            </option>
            <option value="npi">
              Physician / P.A.
            </option>
            <option value="vol">
              Volunteer
            </option>
            <option value="ce">
              Update Current Employee
            </option>
            <option value="ne">
              New Employee
            </option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          Permanently displayed row
        </td>
        <td>
          <input name="perm" size="10" type="text">
        </td>
      </tr>
      <tr class="npi">
        <td>
          NPI Number
        </td>
        <td>
          <input name="npi" size="10" type="text">
        </td>
      </tr>
      <tr class="vol">
        <td>
          Volunteer Number
        </td>
        <td>
          <input name="volNum" size="10" type="text">
        </td>
      </tr>
      <tr class="vol">
        <td>
          Volunteer Type
        </td>
        <td>
          <input name="volType" size="10" type="text">
        </td>
      </tr>
    </table>
  </body>
</html>

I don't know what require.gif is supposed to be doing but I kept it from the original design.

[rajarajan2017]

Mr hashimu,

I think you don't know where to write the code as properly. Just find the attached file which is the code of AirShow in a well formed way. Have also reference of fxm but little bit different.

[Jackson TKL]

Hi guys,
I'm using the above code to create 2 dropdown option, unfortunately, i'm having problem to hide the table row, below are the codes

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Show hide "<tr>" based on the selection</title>
<script language="javascript">
var $ = Object.prototype.$ = function(id){ return document.getElementById ? document.getElementById(id) : document.all ? document.all[id] : null };//Thanks to Essential
function showHideTableRow(tr, show){

	if(!tr){ return false; }
	try{
		tr.style.display = (show) ? '' : 'none';
		return true;
	
	}
	catch(e){
		tr.style.display = (show) ? '' : 'none';
		return true;
		
	}
}
function selAction(sel){
	for(var i=0; i<sel.options.length; i++){
		var trID = sel.options[i].getAttribute('bindTo');
		if(trID !== ''){
			var tr = $(sel.options[i].getAttribute('bindTo'));
			var rtnVal = showHideTableRow(tr, i == sel.selectedIndex);
			//if(!rtnVal){ alert('Table group "' + sel[sel.selectedIndex].value + '" not found'); }//Uncomment this to debug
		}
	}
}


</script>
</head>
<body>
<table>
<tr>
<td>Product Type:</td>
<td colspan="3">
<select name="type" onchange="selAction(this);">
  <option bindTo="" value="Please Select an employee type:">Please Select an product type:</option>
  <option bindTo="trType1" value="Type 1">Type 1</option>
  <option bindTo="trType2" value="Type 2">Type 2</option>
</select>
</td>
</tr>

<tbody id="trType1" style="display:none;">
<tr>
<td>item Type:</td>
<td colspan="3">
<select name="type" onchange="selAction(this);">
  <option bindTo="" value="Please Select an item type:">Please Select an item type:</option>
  <option bindTo="tr1a" value="Type 1-a">Type 1-a</option>
  <option bindTo="tr1b" value="Type 1-b">Type 1-b</option>
  <option bindTo="tr1c" value="Type 1-c">Type 1-c</option>   
</select>
</td>
</tr>
</tbody>


<tbody id="trType2" style="display:none;">
<tr>
<td>item Type:</td>
<td colspan="3">
<select name="type" onchange="selAction(this);">
  <option bindTo="" value="Please Select an item type:">Please Select an item type:</option>
  <option bindTo="tr2a" value="Type 2-a">Type 2-a</option>
  <option bindTo="tr2b" value="Type 2-b">Type 2-b</option>
  <option bindTo="tr2c" value="Type 2-c">Type 2-c</option>
</select>
</td>
</tr>
<tbody id="tr1a" style="display:none;">
<tr>
<td>Type 1-a</td>
<td><input name="volNum" size="10" type="text"></td>
</tr>
<tr>
<td>Type 1-a</td>
<td><input name="volType" size="10" type="text"></td>
</tr>
</tbody>
</tbody>

<tbody id="="tr1b" style="display:none;">
<tr>
<td>Type 1-b</td>
<td><input name="volNum" size="10" type="text"></td>
</tr>
<tr>
<td>Type 1-b</td>
<td><input name="volType" size="10" type="text"></td>
</tr>
</tbody>

<tbody id="tr1c" style="display:none;">
<tr>
<td>Type 1-c</td>
<td><input name="volNum" size="10" type="text"></td>
</tr>
<tr>
<td>Type 1-c</td>
<td><input name="volType" size="10" type="text"></td>
</tr>
</tbody>
<tbody id="tr2a" style="display:none;">
<tr>
<td>Type 2-a</td>
<td><input name="volNum" size="10" type="text"></td>
</tr>
<tr>
<td>Type 2-a</td>
<td><input name="volType" size="10" type="text"></td>
</tr>
</tbody>
</tbody>

<tbody id="="tr2b" style="display:none;">
<tr>
<td>Type 2-b</td>
<td><input name="volNum" size="10" type="text"></td>
</tr>
<tr>
<td>Type 2-b</td>
<td><input name="volType" size="10" type="text"></td>
</tr>
</tbody>

<tbody id="tr2c" style="display:none;">
<tr>
<td>Type 2-c</td>
<td><input name="volNum" size="10" type="text"></td>
</tr>
<tr>
<td>Type 2-c</td>
<td><input name="volType" size="10" type="text"></td>
</tr>
</tbody>

</table>
</body>
</html>