使用JavaScript根据所选的下拉选项隐藏/取消隐藏带有文本输入的表格行

Question

Please help. If I select Business/Corporate from the dropdown, the table row is visible (which is correct), but when I reselect Residential/Consumer, the row does not hide. All I want is to be able to show the row if Business/Corporate is selected (so that one can enter the business name from the input text field) and hide when not selected. Thanks. :)

My JS:

<script language="JavaScript">
function toggle(target)
     {
         if (target!="") {
         obj=document.getElementById(target);
         obj.style.display=( (obj.style.display=='none') ? '' : 'none');
         }
     }
</script>

My select option:

<select name="xaccttype" OnChange="toggle(this.value)">
<option value="Residential/Consumer">Residential/Consumer
<option value="Business/Corporate">Business/Corporate
</select>

My table row:

<tr id="Business/Corporate" style="display:none"><td width="200" align="right"><b>Business Name:</b></td><td width="650"><input type="text" size="35" name="xbusinessname"></td></tr>

Answer 1

Give some different id to the tr . Then do the following in the script. Make sure you do not use / for id names.

Since, you do not have other row with the id as Residential_Consumer , it would not be feasible to check the target dynamically in the script.

 function toggle(target) { console.log("inside"); console.log(target); if (target!="") { obj=document.getElementById("row"); console.log(obj); if(target === "Business_Corporate") obj.style.display= 'block'; else obj.style.display= 'none'; } } 

 <select name="xaccttype" OnChange="toggle(this.value)"> <option value="Residential_Consumer">Residential/Consumer</option> <option value="Business_Corporate">Business/Corporate</option> </select> <table> <tr id="row" style="display:none"> <td width="200" align="right"><b>Business Name:</b></td> <td width="650"><input type="text" size="35" name="xbusinessname"></td> </tr> </table>