使用Javascript隐藏/取消隐藏带有文本输入的表行，具体取决于所选的下拉选项

Hide/Unhide a table row with text input depending on the selected dropdown option using Javascript

本文关键字：隐藏 取决于 选项 取消 Javascript 使用 输入 文本      更新时间：2023-09-26

请帮忙。如果我从下拉菜单中选择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>

给tr一些不同的id。然后在脚本中执行以下操作。请确保您不使用/作为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>

相关文章：