根據所選下拉選項，使用Javascript隱藏/取消隱藏一個包含文本輸入的表格行

Question

請幫忙。如果從下拉列表中選擇Business/Corporate，表格行是可見的（這是正確的），但是當我重新選擇Residential/Consumer時，該行不會隱藏。我想要的只是如果選擇Business/Corporate（以便可以從輸入文本字段輸入商戶名稱）顯示該行，並在未選中時隱藏該行。謝謝。 :)

我的JS：

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

我的選擇選項：

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

我的錶行：

<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

給一些不同id到tr。然後在腳本中執行以下操作。請確保您沒有使用/作爲id的名稱。

因爲，您沒有其他行id爲Residential_Consumer，因此在腳本中動態檢查目標將不可行。

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>