jQuery -how to Bind DropDownlist with Sql Database -Asp.net

.cs Code Here

[WebMethod]
    public DataTable GetName()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("CodeNo", typeof(string));
        dt.Rows.Add("Delhi","D01");
        dt.Rows.Add("Noida", "N01");
        return dt;
    }

code here

 $(document).ready(function () {
            $().ready(function () {
                $.ajax({
                    type: "POST",
                    url: "Home.aspx/GetName",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        $("#City").get(0).options.length = 0;
                        $("#City").get(0).options[0] = new Option("--Select--", "-1");
                     ?.......Here   ....................?
                      });
                    },
                    error: function () {
                        alert("Failed to load ");
                    }
                });
            });

My Out Put

--Select-- only , but i want... DataTable Row ("Delhi","Noida") in SelectList Or DropDpwnlis开发者_运维技巧t like

   -Select--
    Delhi
    Noida

.cs Code

[WebMethod]
    public string  GetName()
    {
        string Result = string.Empty;
        DataTable dt = new DataTable();
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("CodeNo", typeof(string));
        dt.Rows.Add("Delhi", "D01");
        dt.Rows.Add("Noida", "N01");

        if (dt.Rows.Count != 0)
        {

            foreach (DataRow Dr in dt.Rows)
            {
                Result = string.Concat(Result + "<option value=" + Dr["CodeNo"] + ">" + Dr["Name"] + "</option>");
            }
        }

        return Result;
    }

Code for .aspx

$(document).ready(function () {
            $().ready(function () {
                $.ajax({
                    type: "POST",
                    url: "Home.aspx/GetName",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        $("#City").html(msg.d)

                      });
                    },
                    error: function () {
                        alert("Failed to load ");
                    }
                });
            });

Your back-end code looks fine. I see you are using JSON to populate the dropdown. Have a look at the code below. I use it quite often.

$.getJSON("Home.aspx/GetName", function (data) {
    var dropDown = $("#City");
    dropDown.append($("<option></option>").val('').text('- Select -'));

    $.each(data, function () {
        dropDown.append($("<option></option>")
            .val($(this).attr("CodeNo"))
            .text($(this).attr("Name")));
    });

});