javascript - 如何在 ASP.NET Datagrid 中使用 Jquery 附加到下拉列表？

Question

我的“aspx”页面中的以下功能正在运行，但是 GridControl 内的“下拉菜单”正在从原始行复制...。它不会从附加的行中更改。你可以看到我尝试过的行，但我不知道该放什么。我还发布了网格控制本身。我认为您不需要网络方法，也不需要任何隐藏代码。我相信脚本奇才应该能够告诉我我需要什么。 仅供引用...这是使用来自 aspsnippits dot com 的按需加载——至少是其中的一个概念。

 //Function to receive XML response append rows to GridView
function OnSuccess(response) {
    var xmlDoc = $.parseXML(response.d);
    var xml = $(xmlDoc);
    pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
    var customers = xml.find("Customers");
    $("[id$=GridView_MyCustomers] .loader").remove();
    customers.each(function () {
        var customer = $(this);
        var row = $("[id$=GridView_MyCustomers] tr").eq(0).clone(true);
        $(".ID", row).html(customer.find("id").text());
        $(".Name", row).html(customer.find("customername").text());
        $(".company", row).html(customer.find("company").text());
        $(".email", row).html(customer.find("email").text());
        $(".phone", row).html(customer.find("phone").text());
        $(".address", row).html(customer.find("customeraddress").text());

        $(".projeng", row).val(customer.find("usproengineer").text()).change(); //does not work

        $(".regdate", row).html(customer.find("registrationdate").text());
        $(".payterms", row).html(customer.find("paymentterms").text());
        $(".country", row).html(customer.find("country").text());
        $("[id$=GridView_MyCustomers]").append(row);
    });

    //Hide Loader
    $("#loader").hide();
}

 <%--My Customers«e¥x¬É­±--%>
 <div id="customers" runat="server" style="padding-left:10px"> 
     <h2>My Customers</h2>
     <img src="Images/raise.png" alt="" id="jqshow_8" />
     <img src="Images/drop.png" alt="" id="jqhide_8" />
     <asp:LinkButton ID="jqlbtn_8" runat="server" OnClick="lbtn_MyCustomers_Click" CssClass="linkbutton-customer"
         >My Customers</asp:LinkButton>            
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <span id="tag_8">
        <asp:Button ID="export_customer" runat="server" Width="150px" Height="25px"
            Text="Export Customer List" onclick="export_customer_Click" />
     </span>
     <input id="hidden_8" type="hidden" runat="server" value="0" /> &nbsp;&nbsp;&nbsp;
     <asp:Button ID="btPrev" runat="server" Text="&lt;-" />
     <asp:Button ID="btNext" runat="server" Text="-&gt;" onclick="btNext_Click" />
     <div id="div_8">
     <div id="dvGrid" style="max-height:500px; width:auto; overflow-y:auto">
     <asp:GridView ID="GridView_MyCustomers" runat="server" AllowSorting="true"  OnSorting="Customer_Sorting"
        AutoGenerateColumns="False" CssClass="GridViewStyle" 
        onrowdatabound="GridView_MyCustomers_RowDataBound" DataKeyNames="usproengineer" OnPageIndexChanging="GridView_MyCustomers_PageIndexChanging"
        onrowdeleting="lbtn_CustomerDelete" 
              PageSize="500" >        
      <Columns>
        <asp:BoundField HeaderText="ID" DataField="id" ItemStyle-CssClass="ID" />       
        <asp:BoundField HeaderText="Contact" DataField="customername"  SortExpression="customername" ItemStyle-CssClass="Name" />
        <asp:BoundField HeaderText="Company" DataField="company"  SortExpression="company" ItemStyle-CssClass="company" />
        <asp:templateField HeaderText="Email" SortExpression="Email" ItemStyle-CssClass="email">
            <ItemTemplate>
                <asp:LinkButton ID="lbtn_customeremail" runat="server" OnClick="lbtn_customeremail_Click" Text='<%#Eval("email") %>' 
                   ></asp:LinkButton>
            </ItemTemplate>
        </asp:templateField>
        <asp:BoundField HeaderText="Phone" DataField="phone" ItemStyle-CssClass="phone"/>
        <asp:BoundField HeaderText="Address" DataField="customeraddress" ItemStyle-CssClass="address"
              ItemStyle-Width="150px" >
            <ItemStyle Width="150px"></ItemStyle>
          </asp:BoundField>
        <asp:templateField HeaderText="US Project Manager" ItemStyle-CssClass="projeng">
            <ItemTemplate>
                <asp:DropDownList ID="ddl_customerproeng" runat="server" OnSelectedIndexChanged="customerproeng_SelectedIndexChanged"
                     AutoPostBack="true">
                </asp:DropDownList>
            </ItemTemplate>
        </asp:templateField>
        <asp:BoundField HeaderText="Registration Date" DataField="registrationdate" ItemStyle-CssClass="regdate"/>
        <asp:BoundField HeaderText="Note" DataField="paymentterms" ItemStyle-CssClass="payterms"
              ItemStyle-Width="150px" >
                <ItemStyle Width="150px"></ItemStyle>
          </asp:BoundField>
        <asp:TemplateField HeaderText="Delete">
            <ItemTemplate>
                <asp:LinkButton ID="lbtn_customerdelete" runat="server" CommandName="Delete" OnClientClick="{if(confirm('Are you sure to delete this customer?')){ return true;}return false;}" Text="Delete"></asp:LinkButton>
            </ItemTemplate>
       </asp:TemplateField>
       <asp:TemplateField Visible="false" HeaderText="?吼country" ItemStyle-CssClass="country">
            <ItemTemplate>
                <asp:Label runat="server" ID="lbl_country" ReadOnly="True" Text='<%#Eval("country") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>        
    <RowStyle CssClass="RowStyle" />
    <FooterStyle CssClass="FooterStyle" />
    <PagerStyle CssClass="PagerStyle" HorizontalAlign="Center" />
    <SelectedRowStyle CssClass="SelectedRowStyle" />
    <HeaderStyle CssClass="HeaderStyle" />
    <EditRowStyle CssClass="EditRowStyle" />
    <AlternatingRowStyle CssClass="AltRowStyle" />
 </asp:GridView>
 </div>
 </div>          

我应该补充:在我的调试和调试中。我可以看到 DOM 中的值发生变化，并且行的单元格似乎确实具有正确的值，该值被附加到网格中。但屏幕上仍然没有显示，并且最后仍然说在下拉列表中选择了错误的人。

Answer 1

您的类 $(".projeng", ...) 不在下拉列表中，而是在模板上。首先尝试将类移至 ddl。

要通过文本选择下拉项，您可以尝试以下操作:

$("#ddl_customerproeng option").filter(function() {
    return ($(this).text() == "the text"); // does current option's text = "the text"?
}).prop("selected", true); // select the option.