Question

如何根据下拉列表中的选定值显示/隐藏某些div：

（例如，如果当前在下拉列表中选择了从华氏温度转换为摄氏温度，则只能看到转换div）

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<p>
Please choose required calculation from the following list:
    <asp:DropDownList ID="calculation" runat="server">
    <asp:ListItem>Addition of three numbers</asp:ListItem>
    <asp:ListItem>Convert from Fahrenheit to Celsius</asp:ListItem>
    <asp:ListItem>Calculate the side of a right-angled triangle</asp:ListItem>
    <asp:ListItem>Find x using the Quadratic Equation</asp:ListItem>
    </asp:DropDownList>
    <br /><br />
</p>

<div id="addition" runat="server">
    <p>
    Input variable a : <asp:TextBox runat="server" ID="varA"></asp:TextBox><br /><br />
    Input variable c : <asp:TextBox runat="server" ID="varB"></asp:TextBox><br /><br />
    Input variable b : <asp:TextBox runat="server" ID="varC"></asp:TextBox><br /><br />
    <asp:Button ID="additionSubmit" runat="server" Text="Submit"  
            onclick="additionSubmit_Click" /><br /><br />
     <asp:Label ID="lblAddition" runat="server" Text="" CssClass="label"></asp:Label>
    </p>
</div>

<div id="conversion" runat="server">
    <p>
    Input Fahrenheit Temperature : <asp:TextBox runat="server" ID="temperatureF"></asp:TextBox><br /><br />
    <asp:Button ID="converstionSubmit" runat="server" Text="Submit" 
            onclick="converstionSubmit_Click" /><br /><br />
     <asp:Label ID="lblConversion" runat="server" Text="" CssClass="label"></asp:Label>
    </p>
</div>

<div id="triangle"  runat="server">
    <p>
    Input side a : <asp:TextBox runat="server" ID="tsideA"></asp:TextBox><br /><br />
    Input side b : <asp:TextBox runat="server" ID="tsideB"></asp:TextBox><br /><br />
    <asp:Button ID="triangleSubmit" runat="server" Text="Submit" 
            onclick="triangleSubmit_Click" /><br /><br />
     <asp:Label ID="lblTriangle" runat="server" Text="" CssClass="label"></asp:Label>
    </p>
</div>

<div id="quadratic" runat="server">
    <p>
    Input side a : <asp:TextBox runat="server" ID="sideA"></asp:TextBox><br /><br />
    Input side c : <asp:TextBox runat="server" ID="sideB"></asp:TextBox><br /><br />
    Input side b : <asp:TextBox runat="server" ID="sideC"></asp:TextBox><br /><br />
    <asp:Button ID="quadraticSubmit" runat="server" Text="Submit" 
            onclick="quadraticSubmit_Click" /><br /><br />
     <asp:Label ID="lblQuadratic" runat="server" Text="" CssClass="label"></asp:Label>
    </p>
</div>

Answer 1

使用Jquery这将起作用：

(document).ready(function() {
    doIt();
    $('#yourDropdown').change(doIt); //This is triggered on the change of the dropdown list

    function doIt() {       
        switch ($("#yourDropdown").val()) {
            case "addition" :
                $("#addition").show();
                $('#otherDiv').hide();
                break;               
           case "ConvertFToC":
               and so on....
            }
    }); 
})


<select id="yourDropdown">
  <option value="addition">addition</option>
and so on...
</select>


<div id="addition" >
    <p>
    Input variable a : <asp:TextBox runat="server" ID="varA"></asp:TextBox><br /><br />
    Input variable c : <asp:TextBox runat="server" ID="varB"></asp:TextBox><br /><br />
    Input variable b : <asp:TextBox runat="server" ID="varC"></asp:TextBox><br /><br />
    <asp:Button ID="additionSubmit" runat="server" Text="Submit"  
        onclick="additionSubmit_Click" /><br /><br />
     <asp:Label ID="lblAddition" runat="server" Text="" CssClass="label"></asp:Label>
    </p>
</div>

使用Ajax隐藏/显示某些div

1 个答案: