如何更改此代码以显示带有菜单下拉菜单而不是复选框的隐藏表单

How can I change this code to show a hidden form with a menu drop down instead of a checkbox?

本文关键字：复选框 表单 隐藏 下拉菜单 菜单 代码 何更改 显示      更新时间：2023-09-26

这段代码运行良好，但我想更改它，以便它使用下拉菜单选项而不是复选框。 例如，"更多？"的下拉菜单选项将为"是"或"否"。 如果在菜单中选择了"是"，那么我希望隐藏的div 显示，就像在当前代码中选中复选框时一样。

javascript：

<script language="JavaScript">
  function showhidefield()
  {
    if (document.frm.chkbox.checked)
    {
      document.getElementById("hideablearea").style.display = "block";
    }
    else
    {
      document.getElementById("hideablearea").style.display = "none";
    }
  }
</script>

这是 HTML：

 <form name='frm' action='nextpage.asp'>
  <input type="checkbox" name="chkbox" onclick="showhidefield()">
  Check/uncheck here to show/hide the other form fields
  <br>
  <div id='hideablearea' style='visibility:hidden;'>
    <input type='text'><br>
    <input type='submit'>
  </div>
  This is a text line below the hideable form fields.<br>
</form>

谢谢。

将复选框替换为 

<select name="more" onchange="showhidefield()">
  <option value="yes">Yes</option>
  <option value="yes">Yes</option>
</select>

并替换 

if (document.frm.chkbox.checked)

在您的showhidefield()函数中 

if (document.frm.more.value == 'yes')

<form name='frm' action='nextpage.asp'>
  <select name="chkbox" onChange="showhidefield(this)">
     <option value="0" selected="true">-Select-</option>
    <option value="1">Yes</option>
    <option value="2">No</option>
  </select>
  Check/uncheck here to show/hide the other form fields
  <br>
  <div id='hideablearea' style='display:none;'>
    <input type='text'><br>
    <input type='submit'>
  </div>
  This is a text line below the hideable form fields.<br>
</form>

JavaScript代码是：

<script language="JavaScript">
  function showhidefield(that)
  {
    if (that.value == 1)
    {
      document.getElementById("hideablearea").style.display = "block";
    }
    else
    {
      document.getElementById("hideablearea").style.display = "none";
    }
  }
</script>
相关文章：