Binding the multiple drop down boxes in GridView using JQuery in ASP.NET

Here is the code for binding the multiple drop down boxes in GridView using JQuery in ASP.NET

ASPX and JQuery code:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TimeSheetGrid.ascx.cs" Inherits="TimesheetApp.UserControls.TimeSheetGrid" %>
<script src="../Script/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $("select[id$='cboWorkPackage']").each(function()
    {
        getWorkPackages($(this));
    }
    );
   
    $("select[id$='cboModule']").each(function()
    {
        getModules($(this));
    }
    );
}
);

function getWorkPackages(t) {
  $.ajax({
    type: "POST",
    url: "/WebMethods/GridValuesService.asmx",
    data: "<soap:Envelope xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'><soap:Body><GetWorkPackages xmlns='http://tempuri.org/'><ProjectId>" + $("span[id$='lblProjectValue']").html() + "</ProjectId></GetWorkPackages></soap:Body></soap:Envelope>",
    contentType: "text/xml; charset=\"utf-8\"",
    dataType: "xml",
    success: function(response)
    {
     
    },
    complete: function (result,status)
    {
    $(result.responseXML).find("WorkPackage").each(function()
        {
       
           
            var val = $(this).find("WPId").text();
            var text = $(this).find("WPCode").text();
            var myOptions = {
                                val1 : val,
                                val2 : text
                            };
             t.append
                (
                $('<option></option>').html(text).val(val)
                );              
               
        }
    );
    },
    error: function (result,status)
    {
    alert(status);
    }
  });
}


function getModules(t) {
  $.ajax({
    type: "POST",
    url: "/WebMethods/GridValuesService.asmx",
    data: "<soap:Envelope xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'><soap:Body><GetModules xmlns='http://tempuri.org/'><WorkPackageId>" + 1 + "</WorkPackageId></GetModules></soap:Body></soap:Envelope>",
    contentType: "text/xml; charset=\"utf-8\"",
    dataType: "xml",
    success: function(response)
    {
     
    },
    complete: function (result,status)
    {
    $(result.responseXML).find("Module").each(function()
        {
       
           
            var val = $(this).find("ModuleId").text();
            var text = $(this).find("ModuleCode").text();
            var myOptions = {
                                val1 : val,
                                val2 : text
                            };
             t.append
                (
                $('<option></option>').html(text).val(val)
                );              
               
        }
    );
    },
    error: function (result,status)
    {
    alert(status);
    }
  });
}
</script>
<asp:GridView ID="grdTimeSheetView" runat="server" AutoGenerateColumns="false" EnableViewState="true">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:Label ID="lblProject" runat="server" Text="Project"></asp:Label>
            </HeaderTemplate>
            <ItemTemplate>
               <asp:Label ID="lblProjectValue" runat ="server" Text ='<%# Eval("ProjectId") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:Label ID="lblWorkPkg" runat="server" Text ="Work Package"></asp:Label>
            </HeaderTemplate>
            <ItemTemplate>
                <asp:DropDownList ID="cboWorkPackage" runat ="server" EnableViewState ="true"></asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
        <HeaderTemplate>
        <asp:Label ID="lblModule" runat="server" Text ="Module"></asp:Label>
        </HeaderTemplate>
            <ItemTemplate>
                <asp:DropDownList ID="cboModule" runat ="server" EnableViewState ="true"></asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
 

Web Service and Web Methods: 

/// <summary>
    /// Summary description for GridValuesService
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]
    public class GridValuesService : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }
        [WebMethod]
        public List<WorkPackage> GetWorkPackages(long ProjectId)
        {
            WorkPackageDAL wp = new WorkPackageDAL();
            return wp.GetWorkPackages(ProjectId);
        }
        [WebMethod]
        public List<Module> GetModules(long WorkPackageId)
        {
            ModuleDAL module = new ModuleDAL();
            return module.GetModules(WorkPackageId);
        }

    }