Display (Show) DropDownList with Selected Value in GridView Row on Edit Button Click using jQuery

Here  I have created smaple that will help you out.

HTML

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            if ($('[id*=ddlCities]').length > 0) {
                $.ajax({
                    type: "POST",
                    url: 'Default.aspx/PopulateCities',
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnCitiesPopulated,
                    failure: function (response) {
                        alert(response.d);
                    }
                });
            }
        });

        function OnCitiesPopulated(response) {
            $('[id*=ddlCities]').each(function () {
                PopulateCities(response.d, $(this));
                var selectedCity = $(this).closest('tr').find('[id*=hfCity]').val();
                $(this).find('option').each(function () {
                    if ($(this).text() == selectedCity) {
                        $(this).attr("selected", "selected");
                    }
                });
            });
        }
        function PopulateCities(list, control) {
            var xmlDoc = $.parseXML(list);
            var xml = $(xmlDoc);
            var cities = xml.find("Cities");
            if (cities.length > 0) {
                control.empty().append('<option value="0">Please select</option>');
                $.each(cities, function () {
                    var city = $(this);
                    control.append($("<option></option>").val(city.find("CityId").text()).html(city.find("CityName").text()));
                });
            }
        }
    </script>
    <asp:GridView ID="gvDetails" runat="server" OnRowEditing="RowEdit" AutoGenerateColumns="false"
        AutoGenerateEditButton="true" OnRowCancelingEdit="CancelEdit">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Label ID="lblId" Text='<%#Eval("Id") %>' runat="server" />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="txtId" Text='<%#Eval("Id") %>' runat="server" />
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Label ID="City" Text='<%#Eval("City") %>' runat="server" />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:HiddenField ID="hfCity" Value='<%#Eval("City") %>' runat="server" />
                    <asp:DropDownList ID="ddlCities" runat="server">
                    </asp:DropDownList>
                </EditItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        Bind();
    }
}

[WebMethod]
public static string PopulateCities()
{
    DataTable dt = new DataTable("Cities");
    DataSet ds = new DataSet();
    dt.Columns.AddRange(new DataColumn[2] { new DataColumn("CityId", typeof(int)),
                    new DataColumn("CityName", typeof(string)) });
    dt.Rows.Add(1, "Mumbai");
    dt.Rows.Add(2, "Thane");
    dt.Rows.Add(3, "Kalyan");
    dt.Rows.Add(4, "New Mumbai");
    ds.Tables.Add(dt);
    return ds.GetXml();
}

protected void RowEdit(object sender, GridViewEditEventArgs e)
{
    this.gvDetails.EditIndex = e.NewEditIndex;
    Bind();
}

protected void CancelEdit(object sender, GridViewCancelEditEventArgs e)
{
    this.gvDetails.EditIndex = -1;
    Bind();
}

public void Bind()
{
    DataTable dt = new DataTable();
    DataSet ds = new DataSet();
    dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Id", typeof(int)),
                    new DataColumn("City", typeof(string)) });
    dt.Rows.Add(1, "Mumbai");
    dt.Rows.Add(2, "Thane");
    dt.Rows.Add(3, "Kalyan");
    dt.Rows.Add(4, "New Mumbai");
    gvDetails.DataSource = dt;
    gvDetails.DataBind();
}

Screenshot