jquery没有在我的asp页面上工作

时间:2011-05-20 08:41:40

标签: javascript jquery .net asp.net

过去几分钟我一直想弄清楚这有什么问题。

<%@ 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>

1 个答案:

答案 0 :(得分:3)

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

例如,在您的CssClassGridView

中添加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();
        }
    });
});