jquery 在我的 asp 页面上不起作用

Question

在过去的几分钟里，我一直在试图找出问题所在..

<%@ Page Title="test" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<%@ PreviousPageType VirtualPath="~/Top.aspx" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    <style>
        #pagediv { width: 1500px !important; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $("#ddModel").change(function () {
            var selVal = $(this).find(":selected").text();
            var rows = $("#gvTop tr:gt(0)");
            alert(selVal);
            if (selVal == "ALL") {
                $("#gvTop tr").show();
            }
            else {
                var rowToShow = rows.find("td:eq(3)").filter(":contains(" + selVal + ")").closest("tr");
                rows.show().not(rowToShow).hide();
            }
        });
    });
</script>
</asp:Content>

现在还不知道。

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <asp:DropDownList ID="ddModel" runat="server" DataSourceID="ddmodelsource" DataTextField="Column1" DataValueField="Column1">
    </asp:DropDownList>
    <asp:GridView ID="gvTop" runat="server" CellPadding="2" CellSpacing="2" GridLines="Vertical">
    </asp:GridView>
</asp:Content>

Answer 1

这是因为在内容页面中，ASP.NET 将分配的 ID 更改为其他内容。如果您查看页面的来源，您可以看到。因此，替代方法是使用CssClass 访问控件。

例如，将CssClass 添加到您的GridView 和DropDownList

<asp:DropDownList ID="ddModel" runat="server" DataSourceID="ddmodelsource" DataTextField="Column1" DataValueField="Column1" CssClass="dropdown">
</asp:DropDownList>

<asp:GridView ID="gvTop" runat="server" CellPadding="2" CellSpacing="2" 
        GridLines="Vertical" CssClass="grid">
    </asp:GridView>

现在像这样从 jquery 访问它。

$(document).ready(function () {
    $(".dropdown").change(function () {
        var selVal = $(this).find(":selected").text();
        var rows = $(".grid tr:gt(0)");
        alert(selVal);
        if (selVal == "ALL") {
            $(".grid tr").show();
        }
        else {
            var rowToShow = rows.find("td:eq(3)").filter(":contains(" + selVal + ")").closest("tr");
            rows.show().not(rowToShow).hide();
        }
    });
});