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

Visibility of text box depend on value of combo box

本文关键字：组合 可见性 文本 取决于      更新时间：2023-09-26

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

<table width="500" 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文本框可见，我不知道如何做到这一点

使用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()在开始时，当您的页面刚刚加载。

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

<table width="500" 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>

相关文章：