0

ドロップダウンからのユーザーの選択に基づいて、テキスト ボックスまたは div セクション全体を表示/非表示にする最良の方法は何ですか? サーバー コントロールでそれが可能だとは思わないので、通常のクライアント側の HTML コントロールを使用する必要がありますね。ご意見ありがとうございます。jQueryはこれに最適なオプションでしょうか? デフォルトで Div を非表示にし、ユーザーがドロップダウンからオプションを選択したときに表示する方法はありますか?

<div id="divLimitPrice">Limit Price<br />
        <asp:TextBox ID="txtLimitPrice" runat="server" ValidationGroup="ValidationGroupOrder"></asp:TextBox>
        &nbsp;<asp:RequiredFieldValidator ID="rfvLimitPrice" runat="server" ControlToValidate="txtLimitPrice" ErrorMessage="This is a required field."></asp:RequiredFieldValidator>
        </div>

<script type="text/javascript">
    $(function () {
        $('[id*="ddPriceType"]').on('change', function () {
            var val = this.value,
                $divLimitPrice = $('[id*="divLimitPrice"]');

            if (val === 1 || val === 2) {
                // Hide div group
                $divLimitPrice.hide();
            } else {
                // Show div group
                $divLimitPrice.show();
            }
        });
    });
</script>

 Price Type<br />
        <asp:DropDownList ID="ddPriceType" runat="server" ValidationGroup="ValidationGroupOrder">
            <asp:ListItem Value="" Text ="Select a Price Type" />
            <asp:ListItem Value="2" text="Type 2" />
            <asp:ListItem Value="3" text="Type 3" />
            <asp:ListItem Value="4" text="Type 4" />
        </asp:DropDownList>
        &nbsp;<asp:RequiredFieldValidator ID="rfvPriceType" runat="server" ControlToValidate="ddPriceType" ErrorMessage="This is a required field."></asp:RequiredFieldValidator>
        <div id="divLimitPrice">Limit Price<br />
        <asp:TextBox ID="txtLimitPrice" runat="server" ValidationGroup="ValidationGroupOrder"></asp:TextBox>
        &nbsp;<asp:RequiredFieldValidator ID="rfvLimitPrice" runat="server" ControlToValidate="txtLimitPrice" ErrorMessage="This is a required field."></asp:RequiredFieldValidator>
        </div>`

うーん..私はコードを適応させようとしましたが、何かが欠けています! 何かご意見は？お時間をいただきありがとうございます。

4

2 に答える 2

0

そのために使用できます.jquery。

$(function () {
    $('[id*="dropdown"]').on('change', function () {
        var val = this.value,
            $txtbox = $('[id*="txtLimitPrice"]');

        if (val === 1 || val === 2) {
            // Hide text box
            $txtbox.hide();
        } else {
            // Show text box
            $txtbox.show();
        }
    });
});
于 2013-06-03T23:30:43.547 に答える