无法根据用户下拉选择切换jsp中div的可见性

时间：2011-08-25 12:00:54

标签： javascript

在我的jsp中，当我在下拉列表中选择一个选项时，它可以正常使用visibilty切换但是当我第二次尝试它时它不起作用

我的jsp：

<html>
    <head>
    <script src="javascript/display_toggle.js" type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>IDOC AUTHORING TOOL</title>
    </head>
    <body>

    <div id="BasePage"  style="display:block;" >
    <p>
    <u> </u><font size="7"><u>IDOC AUTHORING TOOL</u></font></p>
    <p></p>
    <p>Enter/Choose ailment :
    <select  size="1">
    <option>Malaria</option>
    <option>High Fever</option>
    <option>Cholera</option>
    </select></p>
    <p>Choose Authoring Mode :
    <select size="1" name="AuthoringOption" id ="AuthoringOption" onchange="javascript:display_toggle()">
    <option selected="selected"> </option>
    <option value ="1">Input Desicion Tree</option>
    <option value ="2">Input Prevention</option>
    <option value ="3">Input Symptoms</option>
    <option value ="4">Input Prescription</option>
    </select></p>
    <fieldset style="width: 381px; height: 126px; padding: 2">
        <legend align="left"></legend>
     Tick off patient context :
        <input type="radio" value="V1" checked name="R1">Men
        <input type="radio" name="R1" value="V2">Women
        <p>
        <input type="radio" name="R1" value="V3"> Child
        <input type="radio" name="R1" value="V4"> All</p>
        </fieldset>
    <p>Enter Pre Conditions</p>
    <p><textarea rows="2" cols="20"></textarea> 
    </div> 


    <!-- ______________________________________________________________________________________________________- -->


    <div id="Symptoms" style="display:none;">
    <html:form method="POST" action="symptoms"  >
    <!-- --- -->    
    <p>
    <u> </u><font size="7"><u>IDOC AUTHORING TOOL</u></font></p>
    <p></p>
    <p>Enter/Choose ailment :
    <html:select name="AuthoringForm" property="disease_name" size="1">
    <option>Malaria</option>
    <option>High Fever</option>
    <option>Cholera</option>
    </html:select></p>
    <p>Choose Authoring Mode :
    <select size="1" name="AuthoringOption" id ="AuthoringOption" onChange="javascript:display_toggle()">
    <option selected="selected"> </option>
    <option value ="1">Input Desicion Tree</option>
    <option value ="2">Input Prevention</option>
    <option value ="3">Input Symptoms</option>
    <option value ="4">Input Prescription</option>
    </select></p>
    <fieldset style="width: 381px; height: 126px; padding: 2">
    <legend align="left"></legend>
     Tick off patient context :
    <html:radio value="Men" name="AuthoringForm" property="patient_context" disabled="false"/>Men 
    <html:radio value="Womwen" name="AuthoringForm" property="patient_context" disabled="false"/>Women
    <p>
    <html:radio value="Child" name="AuthoringForm" property="patient_context" disabled="false"/>Child
    <html:radio value="Al" name="AuthoringForm" property="patient_context" disabled="false"/>All
    </fieldset>
    <p>Enter Pre Conditions</p>
    <p><html:textarea rows="2" name="AuthoringForm" cols="20" property="patient_precondition" ></html:textarea>
    <p>Must Have Symptoms : 
    May Have Symptoms :</p>
    <p><html:textarea rows="2" name="AuthoringForm" cols="20" property="must_have_symptoms"></html:textarea>
    <!-- <input type="submit" value="Submit" name="B2">-->
    <html:textarea rows="2" name="AuthoringForm" cols="20" property="may_have_symptoms"></html:textarea>
    <input type="submit" value="Submit" name="symptomsButton"><input type="reset" value="Reset" onclick="this.form.reset()"></p>
    </html:form>
    </div>

    <!--___________________________________________________________________________________________ -->
    <div id="Prevention" style="display:none;">
    <html:form  method="POST" action="prevention"  >

    <!-- ---------------------------------- --> 
    <p>
    <u> </u><font size="7"><u>IDOC AUTHORING TOOL</u></font></p>
    <p></p>
    <p>Enter/Choose ailment :
    <html:select name="AuthoringForm" property="disease_name" size="1">
    <option>Malaria</option>
    <option>High Fever</option>
    <option>Cholera</option>
    </html:select></p>

    <p>Choose Authoring Mode :
    <select size="1" name="AuthoringOption" id ="AuthoringOption" onChange="javascript:display_toggle()">
    <option selected="selected"> </option>
    <option value ="1">Input Desicion Tree</option>
    <option value ="2">Input Prevention</option>
    <option value ="3">Input Symptoms</option>
    <option value ="4">Input Prescription</option>
    </select></p>

        <fieldset style="width: 381px; height: 126px; padding: 2">
        <legend align="left"></legend>
         Tick off patient context :
        <html:radio value="Men" name="AuthoringForm" property="patient_context" disabled="false"/>Men 
        <html:radio value="Womwen" name="AuthoringForm" property="patient_context" disabled="false"/>Women
        <p>
        <html:radio value="Child" name="AuthoringForm" property="patient_context" disabled="false"/>Child
        <html:radio value="Al" name="AuthoringForm" property="patient_context" disabled="false"/>All
        </fieldset>

    <p>Enter Pre Conditions</p>

        <p><html:textarea rows="2" name="AuthoringForm" cols="20" property="patient_precondition" ></html:textarea>


    <!-- --------------------------------------------------- -->   


        <p>Input for Prevention :
        </p>
        <p><html:textarea rows="8" name="AuthoringForm" cols="79" property="prevention"></html:textarea>
        <input type="submit" value="Submit" name="preventionButton"><input type="reset" value="Reset" onclick="this.form.reset()">
        </p>
    </html:form>
    </div>


    <!--____________________________________________________________________________________________ -->




    <div id="decisiontree" style="display:none;">

    <html:form method="POST" action="decisiontree" >
    <!-- ------------------------------------------------ -->
    <p>
    <u> </u><font size="7"><u>IDOC AUTHORING TOOL</u></font></p>
    <p></p>
    <p>Enter/Choose ailment :
    <html:select name="AuthoringForm" property="disease_name" size="1">
    <option>Malaria</option>
    <option>High Fever</option>
    <option>Cholera</option>
    </html:select></p>

    <p>Choose Authoring Mode :
    <select size="1" name="AuthoringOption" id ="AuthoringOption" onChange="javascript:display_toggle()">
    <option selected="selected"> </option>
    <option value ="1">Input Desicion Tree</option>
    <option value ="2">Input Prevention</option>
    <option value ="3">Input Symptoms</option>
    <option value ="4">Input Prescription</option>
    </select></p>

        <fieldset style="width: 381px; height: 126px; padding: 2">
        <legend align="left"></legend>
         Tick off patient context :
        <html:radio value="Men" name="AuthoringForm" property="patient_context" disabled="false"/>Men 
        <html:radio value="Womwen" name="AuthoringForm" property="patient_context" disabled="false"/>Women
        <p>
        <html:radio value="Child" name="AuthoringForm" property="patient_context" disabled="false"/>Child
        <html:radio value="Al" name="AuthoringForm" property="patient_context" disabled="false"/>All
        </fieldset>

    <p>Enter Pre Conditions</p>
    <p><html:textarea rows="2" name="AuthoringForm" cols="20" property="patient_precondition" ></html:textarea>

    <!-- ------------------------------------------------ -->

        <p>
        </p>
        <fieldset style="width: 1225px; height: 451px; padding: 2">
        <legend>Decision Tree Preview </legend>

    <applet code="com.vaannila.utility.dynamicTreeApplet.class" archive="./appletjars/dynamictree.jar, ./appletjars/prefuse.jar" width ="1000" height="500">
    </applet>
    </fieldset><p>

        </p>
        <p>Enter Follow Up Questions :</p>

        <html:textarea rows="4" name="AuthoringForm" cols="45" property="follow_up_questions" ></html:textarea>
        <html:radio value="Yes" name="AuthoringForm" property="followupconsent" disabled="false"/> Yes
        <html:radio  value="No" name="AuthoringForm" property="followupconsent" disabled="false"/> No
        <input type="submit" value="Submit" name="followupQuestionButton"><input type="reset" value="Reset" onclick="this.form.reset()"><p>
        </p>
    </html:form>
    </div>
    <!--  ______________________________________________________________________________________________________________________________-->

    <div id="Prescription" style="display:none;">
    <html:form  method="POST" action="prescription"  >

    <!-- ---------------------------------- --> 
    <p>
    <u> </u><font size="7"><u>IDOC AUTHORING TOOL</u></font></p>
    <p></p>
    <p>Enter/Choose ailment :
    <html:select name="AuthoringForm" property="disease_name" size="1">
    <option>Malaria</option>
    <option>High Fever</option>
    <option>Cholera</option>
    </html:select></p>

    <p>Choose Authoring Mode :
    <select size="1" name="AuthoringOption" id ="AuthoringOption" onChange="javascript:display_toggle()">
    <option selected="selected"> </option>
    <option value ="1">Input Desicion Tree</option>
    <option value ="2">Input Prevention</option>
    <option value ="3">Input Symptoms</option>
    <option value ="4">Input Prescription</option>
    </select></p>

        <fieldset style="width: 381px; height: 126px; padding: 2">
        <legend align="left"></legend>
         Tick off patient context :
        <html:radio value="Men" name="AuthoringForm" property="patient_context" disabled="false"/>Men 
        <html:radio value="Womwen" name="AuthoringForm" property="patient_context" disabled="false"/>Women
        <p>
        <html:radio value="Child" name="AuthoringForm" property="patient_context" disabled="false"/>Child
        <html:radio value="Al" name="AuthoringForm" property="patient_context" disabled="false"/>All
        </fieldset>

    <p>Enter Pre Conditions</p>

        <p><html:textarea rows="2" name="AuthoringForm" cols="20" property="patient_precondition" ></html:textarea>


    <!-- --------------------------------------------------- -->   


        <p>Input for Prescription :
        </p>
        <p><html:textarea rows="8" name="AuthoringForm" cols="79" property="prescrption"></html:textarea>
        <input type="submit" value="Submit" name="prescriptionButton" ><input type="reset" value="Reset" onclick="this.form.reset()">

        </p>
    </html:form>
    </div>
    </body>
    </html>

我的javascript：

function display_toggle(){
var e=document.getElementById("AuthoringOption").value;
if (e=="1"){
document.getElementById("Symptoms").style.display="none";
document.getElementById("Prevention").style.display="none";
document.getElementById("decisiontree").style.display="block";
document.getElementById("BasePage").style.display="none";
document.getElementById("Prescription").style.display="none";
}
else if(e=="2"){
document.getElementById("Prevention").style.display="block";
document.getElementById("decisiontree").style.display="none";
document.getElementById("Symptoms").style.display="none";
document.getElementById("BasePage").style.display="none";
document.getElementById("Prescription").style.display="none";
}
else if(e=="3"){
document.getElementById("decisiontree").style.display="none";
document.getElementById("Symptoms").style.display="block";
document.getElementById("Prevention").style.display="none";
document.getElementById("BasePage").style.display="none";
document.getElementById("Prescription").style.display="none";
}
else if(e =="4"){
document.getElementById("decisiontree").style.display="none";
document.getElementById("Symptoms").style.display="none";
document.getElementById("Prevention").style.display="none";
document.getElementById("BasePage").style.display="none";
document.getElementById("Prescription").style.display="block";
}
}

1 个答案:

答案 0 :(得分：0)

所有这些&nbsp;使得阅读代码非常困难。你可以删除所有不必要的东西吗？最有可能的是，第一次通过JS时，其中一行会产生错误。许多浏览器在生成错误后在页面上禁用JS。

我建议您先查看控制台，看看是否显示任何JS错误。

相关问题
最新问题