2014-10-30 95 views
0

嗨,我想創建一個基於疾病選擇症狀的表單。但問題是div不顯示在相同的位置。請幫我解決一下這個。讓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> 

我想div元素出現在相同的位置,當我切換選擇選項 - >

+5

呃......我怕我再也不會去看醫生,如果他們使用這種形式的做出診斷... – Teemu 2014-10-30 17:06:15

+1

什麼div,什麼位置?請提出明確的問題,提供您實現這些目標的準確目標和問題 – charlietfl 2014-10-30 17:17:13

回答

0

變化能見度(隱藏/可見)由顯示器(塊/無),他們將出現在同一個地方。

HTML:

style="display: none;" 

JS:

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