1

大家好，提前感谢您的帮助。所以在过去的两周里，我一直在用 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>

谁能告诉我为什么我的 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

4

3 回答 3

2

您是否尝试过使用ClientID

 $('#<%= CreateStudentAccountPanel.ClientID %>').hide();
 ....
于 2012-07-19T16:49:20.353 回答
1

在良好的 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 使用静态 - 它使生活变得更加简单。

于 2012-07-20T06:46:39.110 回答
0

我认为你应该使用类似的东西#<%= CreateUniversityAccountPanel.ClientID %> 作为你的选择器。

于 2012-07-19T16:51:16.947 回答