Can't get value from dropdown which is binded using JQuery

[WebMethod]
    public static CountryDetails[] BindDatatoDropdown()
    {
        DataTable dt = new DataTable();
        List<countrydetails> details = new List<countrydetails>();

        using (SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["connectionstring"].ConnectionString))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT ID,Name FROM test", con))
            {
                con.Open();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);
                foreach (DataRow dtrow in dt.Rows)
                {
                    CountryDetails country = new CountryDetails();
                    country.ID = Convert.ToInt32(dtrow["ID"].ToString());
                    country.Name = dtrow["Name"].ToString();
                    details.Add(country);
                }
            }
        }
        return details.ToArray();
    }
public class CountryDetails
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "AllAccomodation.aspx/BindDatatoDropdown",
            data: "{}",
            dataType: "json",
            success: function (data) {
                $.each(data.d, function (key, value) {
                    $("#ContentPlaceHolder1_typelisting").append($("<option></option>").val(value.ID).html(value.Name));
                });
            },
            error: function (result) {
                alert("Error");
            }
        });
    });