C# 基于下拉列表隐藏/显示文本的jquery函数

大家好，提前谢谢你们的帮助。因此，在过去的两周里，我一直在用C#学习asp.net，我觉得我理解得很好，但我在jQuery功能方面遇到了一些问题。我试图设置一个表单，该表单将有一个下拉列表，根据所选的选项，不同的帐户创建表单将显示在其面板中。我使用了以下代码：

 <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/FrontEnd.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Login_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="CPMainContent" Runat="Server">
    <asp:DropDownList ID="AccountTypeDDL" runat="server" >
        <asp:ListItem>Resident Account</asp:ListItem>
        <asp:ListItem>Student Account</asp:ListItem>
        <asp:ListItem>University Account</asp:ListItem>
    </asp:DropDownList>

    <asp:Panel ID="CreateStudentAccountPanel" runat="server" >
        <asp:Label ID="Label1" runat="server" Text="Create Student Account"></asp:Label>
    </asp:Panel>

    <asp:Panel ID="CreateUniversityAccountPanel" runat="server">
        <asp:Label ID="Label2" runat="server" Text="Create University Account"></asp:Label>
    </asp:Panel>

    <asp:Panel ID="CreateResidentAccountPanel" runat="server">
        <asp:Label ID="Label3" runat="server" Text="Create Resident Account"></asp:Label>
    </asp:Panel>
</asp:Content>

<asp:Content ID="ScriptContent" ContentPlaceHolderID="CPClientScript" runat="server">
    <script type="text/javascript">


        $(function ()
        {
            alert('hi');
            //This hides all initial textboxes
            $('#CreateStudentAccountPanel').hide();
            $('#CreateUniversityAccountPanel').hide();
            $('#CreateResidentAccountPanel').hide();



            $('#AccountTypeDDL').change(function ()
            {
                //This saves some time by caching the jquery value
                var val = $(this).index.toString;
                //this hides any boxes that the previous selection might have left open
                $('Panel').hide();
                //This just opens the ones we want based off the selection
                switch (val)
                {
                    case '0':
                        $('#CreateResidentAccountPanel').show();
                        $('#CreateUniversityAccountPanel').hide();
                        $('#CreateStudentAccountPanel').hide();
                       break;
                    case '1':
                        $('#CreateStudentAccountPanel').show();
                        $('#CreateResidentAccountPanel').hide();
                        $('#CreateUniversityAccountPanel').hide();
                        break;
                    case '2':
                        $('#CreateUniversityAccountPanel').show();
                        $('#CreateStudentAccountPanel').hide();
                        $('#CreateResidentAccountPanel').hide();
                        break;

                }
            });

        });
    </script>
</asp:Content>

居民帐户
学生帐户
大学账户
$（函数（）
{
警报（“hi”）；
//这将隐藏所有初始文本框
$（“#CreateStudentAccountPanel”）.hide（）；
$（“#CreateUniversityAccountPanel”）.hide（）；
$（“#CreateResidentAccountPanel”）.hide（）；
$（'#AccountTypeDDL'）。更改（函数（）
{
//这通过缓存jquery值节省了一些时间
var val=$（this）.index.toString；
//这将隐藏上一选择可能未打开的任何框
$（'Panel'）.hide（）；
//这只是根据选择打开我们想要的
开关（val）
{
案例“0”：
$（'#CreateResidentAccountPanel'）.show（）；
$（“#CreateUniversityAccountPanel”）.hide（）；
$（“#CreateStudentAccountPanel”）.hide（）；
打破
案例“1”：
$（“#CreateStudentAccountPanel”）.show（）；
$（“#CreateResidentAccountPanel”）.hide（）；
$（“#CreateUniversityAccountPanel”）.hide（）；
打破
案例“2”：
$（“#CreateUniversityAccountPanel”）.show（）；
$（“#CreateStudentAccountPanel”）.hide（）；
$（“#CreateResidentAccountPanel”）.hide（）；
打破
}
});
});

有人能告诉我为什么我的jQuery代码无法在非选择的面板中隐藏文本吗？我迷路了。再次感谢

编辑抱歉把最后一篇文章搞砸了：

`code`
 var val = $('#<= AccountTypeDDL.ClientID %>').index;
                //this hides any boxes that the previous selection might have left open
                $('Panel').hide();
                //This just opens the ones we want based off the selection
                switch (val)
                {
                    case 0:
                        $('#<%= CreateResidentAccountPanel.ClientID %>').show();
                        $('#<%= CreateStudentAccountPanel.ClientID %>').hide();
                        $('#<%= CreateUniversityAccountPanel.ClientID %>').hide();
                       break;
                    case 1:
                        $('#<%= CreateResidentAccountPanel.ClientID %>').hide();
                        $('#<%= CreateStudentAccountPanel.ClientID %>').show();
                        $('#<%= CreateUniversityAccountPanel.ClientID %>').hide();
                        break;
                    case 2:
                        $('#<%= CreateResidentAccountPanel.ClientID %>').hide();
                        $('#<%= CreateStudentAccountPanel.ClientID %>').hide();
                        $('#<%= CreateUniversityAccountPanel.ClientID %>').show();
                        break;

`code`
var val=$（'#'）。索引；
//这将隐藏上一选择可能未打开的任何框
$（'Panel'）.hide（）；
//这只是根据选择打开我们想要的
开关（val）
{
案例0：
$（'#'）。show（）；
$（'#'）。隐藏（）；
$（'#'）。隐藏（）；
打破
案例1：
$（'#'）。隐藏（）；
$（'#'）。show（）；
$（'#'）。隐藏（）；
打破
案例2：
$（'#'）。隐藏（）；
$（'#'）。隐藏（）；
$（'#'）。show（）；
打破

---

code

您是否尝试过使用

ClientID

 $('#<%= CreateStudentAccountPanel.ClientID %>').hide();
 ....

$（'#'）.hide（）；
....

我认为您应该使用类似于

#

的东西作为选择器。

在一个好的JavaScript调试器（如FireBug）中加载页面，然后尝试使用控制台隐藏一个页面，如果通过运行以下行显示部分：

$('#CreateResidentAccountPanel').hide()

如果这不起作用，请使用FireBug的html检查器查看面板div的实际ID。Asp.Net倾向于添加自己的垃圾ID，除非您明确告诉它不要添加。为避免此情况，请在面板标记定义中添加

ClientIDMode=“Static”

属性：

<asp:Panel ID="CreateResidentAccountPanel" ClientIDMode="Static" runat="server">
    <asp:Label ID="Label3" runat="server" Text="Create Resident Account"></asp:Label>
</asp:Panel>

---

我知道我将通过jQuery操作的所有ID通常都使用Static，这使操作更加简单。

谢谢！这是有道理的。但是..虽然这对隐藏初始面板有效，但即使在我更改了switch语句中的语法之后，下拉列表也不能有效地隐藏/显示不同的面板。@Christian:可以吗在你的问题中更新你的最新代码？@Christian:那么更新的代码中哪个部分不起作用？这个var

val

的值是多少？var val，我假设是存储帐户下拉列表的选定索引。switch语句应该隐藏与选定索引不对应的面板，并显示panel确实如此。但是，在此时更改页面下拉列表中的选定项不会起任何作用。@Christian:您弄错了我的问题。。该变量的值是多少？通过放置警报或调试来检查是否忘记添加，使用静态ClientMode也适用于您自己有JavaScript的大型项目le，而#type语法只在.aspx文件中的位置起作用。