Question

您好我想创建一个基于疾病选择症状的表格。但问题是div不会显示在同一位置。请帮帮我。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Untitled Document</title>
  Scripting Part:script for selecting the division according to the selection option.

  <script>
    function testCheckbox(str) {
      document.getElementById("diabetes").style.visibility = (str == "diabetes") ? "visible" : "hidden";
      document.getElementById("jaundice").style.visibility = (str == "jaundice") ? "visible" : "hidden";

    }
  </script>
  //Form Design:

</head>

<body>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <form action="treatment.php" method="post" name="treatmentform">
    <center>
      <br>Treatments
      <br>
      <table width="535" border="0">
        <tr>
          <td width="130">Patient ID:</td>
          <td width="395">
            <input type="text" name="p_id">
          </td>
        </tr>
        <tr>
          <td>Patient Name:</td>
          <td>
            <input type="text" name="p_name">
          </td>
        </tr>
      </table>

      <p>&nbsp;</p>
      <table width="533" border="0">
        <tr>
          <td width="165">Diseases:</td>
          <td width="358">
            <select name="diseases" onchange="testCheckbox(this.value);">
              <option value="diabetes">Diabetes</option>
              <option value="jaundice">Jaundice</option>
              <option value="pressure">Pressure</option>
              <option value="depression">Depression</option>
            </select>
          </td>
        </tr>

        //Div section:

        <tr>
          <td height="150">Symptoms:</td>
          <td>
            <div id="diabetes" style="visibility: hidden;">
              <p>
                <input type="checkbox" name="chkOption" value="1">Blurry vision
                <input type="checkbox" name="chkOption2" value="1">Fatigue
                <p>
                  <input type="checkbox" name="chkOption22" value="1">Weight loss &nbsp;&nbsp;
                  <input type="checkbox" name="chkOption222" value="1">Lack of Sensation
                  <br>
            </div>
            <div id="jaundice" style="visibility: hidden; font-size: 24;">
              <p>
                <input type="checkbox" name="chkOption" value="1">Itching
                <input type="checkbox" name="chkOption3" value="1">Weight loss
                <p>
                  <input type="checkbox" name="chkOption4" value="1">Loss of Apetite
                  <input type="checkbox" name="chkOption42" value="1">
                  <br>

            </div>

            //Divsection ends:

          </td>
        </tr>
      </table>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </center>
  </form>
</body>

</html>

当我切换选择选项 - ＆gt;

时，我希望div元素出现在相同的位置

Answer 1

通过显示（阻止/无）更改可见性（隐藏/可见），它们将出现在同一位置。

HTML：

style="display: none;"

JS：

document.getElementById("diabetes").style.display= (str == "diabetes") ? "block" : "none";

使div出现在同一位置

1 个答案: