ASP.NET 服务器控件 - 根据下拉选择显示隐藏文本框答案

【问题标题】：ASP.NET Server Controls - Show Hide Textbox based on Dropdown selectionASP.NET 服务器控件 - 根据下拉选择显示隐藏文本框
【发布时间】：2013-06-04 19:09:31
【问题描述】：

根据用户从下拉列表中的选择，显示/隐藏文本框或整个 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>`

嗯.. 我尝试修改代码，但我遗漏了一些东西！有什么想法吗？感谢您的宝贵时间。

【问题讨论】：

使用服务器控件可以完成相同的行为。
正如答案所暗示的，完成此任务的最佳方法是在客户端使用 jQuery。 “服务器控件”可以通过切换 .Visible 属性来模仿这种行为。例如，您可以在的 SelectedIndexChanged 事件上切换服务器端的的 .Visible 属性。然后，您可以将所有内容包装在 UpdatePanels 中以使其无缝 (AJAX)。

标签： javascript jquery asp.net css html

【解决方案1】：

没有什么是不可能的。你可以做任何你在问题中提出的问题。也不需要切换到普通的 HTML 控件。如果你想隐藏一个文本框或 div 没关系。我将向您展示一个没有 aspx 控件的简单示例。按照同样的方法，你会得到你所期望的结果。

查看此链接

JSFiddle Here

在 div 标签内你可以使用任何 aspx 控件

<div>
<asp:textbox id="TxtSample" runat="server" />
</div>

Or Instead of DIV you can use Panels too

<asp:Panel ID="PnlLogin" runat="server">
 -- --  Your Controls Here
</asp:panel>

【讨论】：

【解决方案2】：

您可以为此使用.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();
        }
    });
});

【讨论】：

谢谢！我试试看
谢谢大家，非常有帮助，不胜感激。