Change the Value of Parent Dropdown using Jquery and the child will show the data

My HTML Code

<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
    <table>
        <tr>
            <td style="width: 80px">
                Country:
            </td>
            <td>
                <asp:DropDownList ID="ddlCountries" runat="server" Width="150">
                </asp:DropDownList>
                <cc1:CascadingDropDown ID="cdlCountries" TargetControlID="ddlCountries" PromptText="Select Country"
                    PromptValue="" ServicePath="ServiceCS.asmx" ServiceMethod="GetCountries" runat="server"
                    Category="CountryId" LoadingText="Loading..." />
            </td>
        </tr>
        <tr>
            <td>
                State:
            </td>
            <td>
                <asp:DropDownList ID="ddlStates" runat="server" Width="150">
                </asp:DropDownList>
                <cc1:CascadingDropDown ID="cdlStates" TargetControlID="ddlStates" PromptText="Select State"
                    PromptValue="" ServicePath="ServiceCS.asmx" ServiceMethod="GetStates" runat="server"
                    Category="StateId" ParentControlID="ddlCountries" LoadingText="Loading..." />
            </td>
        </tr>
        <tr>
            <td>
                City:
            </td>
            <td>
                <asp:DropDownList ID="ddlCities" runat="server" Width="150">
                </asp:DropDownList>
                <cc1:CascadingDropDown ID="cdlCities" TargetControlID="ddlCities" PromptText="Select City"
                    PromptValue="" ServicePath="ServiceCS.asmx" ServiceMethod="GetCities" runat="server"
                    Category="CityId" ParentControlID="ddlStates" LoadingText="Loading..." />
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
            </td>
        </tr>
    </table>
    <br />
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="lnkEdit" runat="server">Edit</asp:LinkButton>
                    <asp:LinkButton ID="lnkDelete" runat="server">Delete</asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Label ID="lblCountry" runat="server" Text=""></asp:Label>
                    <asp:Label ID="lblCountryID" runat="server" Text="" style="display:none;"></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Label ID="lblState" runat="server" Text=""></asp:Label>
                    <asp:Label ID="lblStateID" runat="server" Text="" style="display:none;"></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Label ID="lblCity" runat="server" Text=""></asp:Label>
                    <asp:Label ID="lblCityID" runat="server" Text="" style="display:none;"></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

 My JQUERY Code

<script src="../dist/jquery-1.12.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
        $("[id*=lnkEdit]").click(function () {
            var row = $(this).closest("tr");
            var country = row.find("[id*lblCountryID]").eq(1).html();
            var state = row.find("[id*lblStateID]").eq(2).html();
            var city = row.find("[id*lblCityID]").eq(3).html();

            $("#<%=ddlCountries.ClientID%>").val(country);
            $("#<%=ddlStates.ClientID%>").val(state);
            $("#<%=ddlCities.ClientID%>").val(city);

            return false;
        });
    </script>