-1

ドロップダウンリストで選択した値に応じて、特定の 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>

4

1 に答える 1

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>
于 2013-07-08T09:41:34.657 に答える