I am trying to bind dropdownlist in MVC using AJAX jquery

public JsonResult BindCountryDropDown()         {             var CountryList = objdal.PopulateCountry();             return Json(CountryList, JsonRequestBehavior.AllowGet);         }

public List PopulateCountry()         {             List items = new List();             SqlCommand com = new SqlCommand("Select Country_Id, Country_Name from CountryMst", con);             com.CommandType = CommandType.Text;             SqlDataAdapter da = new SqlDataAdapter(com);             DataTable dt = new DataTable();              con.Open();             da.Fill(dt);             con.Close();             foreach (DataRow dr in dt.Rows)             {                 items.Add(                     new SelectListItem                     {                         Text=Convert.ToString(dr["Country_Name"]),                         Value=Convert.ToString(dr["Country_Id"])                     }                     );             }             return items;         }

function BindCountryList() {     debugger;     $.ajax({         url: "/Employee/BindCountryDropDown",         data: "{}",         type: "GET",         dataType: "json",         contentType: "application/json; charset=utf-8",         success: OnSuccess,         error: OnError     });     function OnSuccess(data) {         //$("[id*=lstLoginId]").attr("enabled", "enabled");         var d = data.d;         var dropdown = $('#ddlCountry');         dropdown.append('Please select Country');         for (var i = 0; i < d.length; i++) {             // alert(d[i].UserTypeId);             dropdown.append($('').val(d[i].val).html(d[i].Text));             //"" + data[i].Text + ""         }     }     function OnError() {         alert("Failed in Bind Country Data");     } }

$(document).ready(function () {     $('#more').click();     loadData();     BindCountryList(); });

<div class="panel panel-primary">                 <div class="panel-heading">                     <h4 class="panel-title">Employee Registration</h4>                 </div>                 <form>                      <div class="panel-body">                         <div class="form-group">                             <label for="name">Name(*)</label>                             <input type="text" class="form-control" id="name">                             <input type="hidden" class="form-control" id="empid">                         </div>                         <div class="form-group">                             <label for="adress">Address(*)</label>                             <input type="text" class="form-control" id="address">                         </div>                         <div class="form-group">                             <label for="Contact">Contact(*)</label>                             <input type="text" class="form-control" onkeypress = "return isNumberKey(event)" id="Contact">                         </div>                         <div class="form-group">                             <label for="Contact">Country(*)</label>                             <select class="form-control dropdown" id="ddlCountry" name="ddlCountry"></select>                             @*@Html.DropDownList("ddlCountry", "Choose Country")*@                         </div>                       </div>                     <div class="panel-footer">                         <p class="text-center">                             <button type="submit" class="btn btn-success" id="btnAdd" onclick="return Add();">Add Record</button>                             <button type="submit" id="btnUpdate" class="btn btn-primary" onclick="return Update();" style="display: none;">Update Record</button>                             <input type="submit" id="btnreset" class="btn btn-danger" onclick="clearTextBox();" value="Reset Your Text Field's" />                         </p>                     </div>                 </form>             </div>