Question

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

Answer 1

您是否尝试过使用ClientID

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

Answer 2

在一个优秀的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>

我通常对所有ID使用静态我知道我将通过jQuery进行操作 - 它使生活变得更加简单。

Answer 3

我认为你应该使用像#<%= CreateUniversityAccountPanel.ClientID %>这样的选择器。

jquery函数，它根据下拉列表隐藏/显示文本

3 个答案: