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

Question

这段代码运行得很好，但我想更改它，以便它使用下拉菜单选项而不是复选框。例如，“更多？”的下拉菜单选项会是“是”或“否”。如果在菜单中选择“yes”，那么我希望隐藏的 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>

谢谢。

Answer 1

将您的复选框替换为

<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')

Answer 2

<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>