binding drop down using ajax

Question

hello i want to bind dropdown using ajax jquery but it is not working , when my function is called it is hitting  my web method but data is not shown in drop down. plz help me

 

 

see my code :

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: "City.aspx/BindCountry",

data: "{}",

dataType: "json",

SUCCESS: function (data) {

$.each(data.d, function (key, value) {

$("#MainContent_ddlCountry").append($("<option></option>").val(value.CountryID).html(value.CountryName));

});

},

error: function (result) {

alert("Error");

}

});

});

</script>

 -----------------------------------------------------------

 

 

public static ClsCountry[] BindCountry()

{

string con = ConfigurationSettings.AppSettings["connectionstring"];

DataSet ds = new DataSet();

using (SqlConnection cont = new SqlConnection(con))

{

using (SqlCommand cmd = new SqlCommand("usp_FetchCountry", cont))

{

cmd.CommandType = CommandType.StoredProcedure;

using (SqlDataAdapter sda = new SqlDataAdapter(cmd))

{

DataTable dt = new DataTable();

sda.Fill(ds);

}

}

}

DataTable dt1 = ds.Tables[0];

List<ClsCountry> details = new List<ClsCountry>();

foreach (DataRow dr in dt1.Rows)

{

ClsCountry Obj = new ClsCountry();

Obj.CountryID = Convert.ToInt32(dr["CountryId"]);

Obj.CountryName = dr["CountryName"].ToString();

details.Add(Obj);

}

return details.ToArray();

}