文本框的可见性取决于组合框的值

Posted 2023-05-07

【中文标题】文本框的可见性取决于组合框的值

【英文标题】：Visibility of text box depend on value of combo box

【发布时间】：2013-03-14 13:15:38

【问题描述】：

我想根据组合框的选定值设置文本框的可见性。 这是我的代码：

<table  align="center">
  <tr>
    <td><span> Name:</span></td>
    <td><input name="name"  type="text" id="name" size="40" class=""/></td>
  </tr>
  <tr>
    <td><span>Email ID:</span></td>
    <td><input name="email"  type="email" id="email" size="40" class=""/></td>
  </tr>
  <tr>
    <td><span>Select:</span></td>
    <td>
      <select id="edition">
        <option value="none" selected>----Select ----</option>
        <option id="1">A</option>
        <option id="2">B</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><span>Number of Licenses</span></td>
    <td><input type="text" id="licenseNo" size="5" value="30" /></td>
  </tr>
</table>

如果组合框的值为 B，我希望 licenseNo 文本框可见。我不知道该怎么做。

【问题讨论】：

你可以通过javascript做吗？

是的。最好使用javascript

我更新了答案。刚刚添加了 tr 并给了它 id 。现在您可以隐藏整行了。

【参考方案1】：

使用 JS 添加事件监听器：

<script type="text/javascript">
function func() 
    var elem = document.getElementById("edition");
    if(elem.options[elem.selectedIndex].innerhtml == "B") 
        document.getElementById("licenseNo").style.display = "";
     else 
        document.getElementById("licenseNo").style.display = "none";
    

</script>

<select id="edition" onchange="javascript:func();">
    ...
</select>

也不要忘记在开始时调用func()，当您的页面刚刚加载时。

【讨论】：

我们也可以对文本做同样的事情吗？就像我希望在选择 B 后显示许可的文本数量。

那么当你想隐藏文本框的时候？

是的，只需将 licenseNo 字段和文本包装在一个 div 或 span 中，给该包装器一个 id，然后显示/隐藏它。

【参考方案2】：

您也可以像下面这样使用它。只需使用 value 来获取选定的文本

<table  align="center" >
  <tr>
    <td><span> Name:</span></td>
    <td><input name="name"  type="text" id="name" size="40" class=""/></td>
  </tr>
  <tr>
    <td><span>Email ID:</span></td>
    <td><input name="email"  type="email" id="email" size="40" class=""/></td>
  </tr>
  <tr>
    <td><span>Select:</span></td>
    <td>
     <select id="edition" onchange="func()">
      <option value="none" selected >----Select ----</option>
      <option id="1">A</option>
      <option id="2">B</option>
     </select>
    </td>
  </tr>
  <tr id ="trhide">
    <td><span>Number of Licenses</span></td>
    <td><input type="text" id="licenseNo" size="5" value="30" /></td>
  </tr>
</table>

<script type="text/javascript">
 function func() 
   var elem = document.getElementById("edition");

   if(elem.value == "B") 
      document.getElementById("trhide").style.visibility = "visible"; 
    else 
     document.getElementById("trhide").style.visibility = "hidden"; 
   
 
</script>

见小提琴here