jquery - Load dropdown list with navigation property depend on another dropdown list -

my project model class this

public class project {     [key]     public int id { get; set; }      [required(errormessageresourcetype = typeof(resources.resources),     errormessageresourcename = "emptyprojectname")]     [display(name = "projectname", resourcetype = typeof(resources.resources))]      public string name { get; set; }      [foreignkey("country")]     [required(errormessageresourcetype = typeof(resources.resources),     errormessageresourcename = "emptycountry")]     [display(name = "country", resourcetype = typeof(resources.resources))]      public int countryid { get; set; }      [foreignkey("province")]     [required(errormessageresourcetype = typeof(resources.resources),     errormessageresourcename = "emptyprovince")]     [display(name = "province", resourcetype = typeof(resources.resources))]      public int provinceid { get; set; }      public country country { get; set; }     public province province { get; set; } } 

my create view this

@using (html.beginform()) { @html.validationsummary(true)  <fieldset>     <legend>project</legend>      <div class="editor-label">         @html.labelfor(model => model.name)     </div>     <div class="editor-field">         @html.editorfor(model => model.name)         @html.validationmessagefor(model => model.name)     </div>  <div class="editor-label">         @html.labelfor(model => model.countryid)     </div>     <div class="editor-field">         @html.dropdownlist("countryid", string.format("--- {0} {1} ---", @resources.resources.select, @resources.resources.country))         @html.validationmessagefor(model => model.countryid)     </div>      <div class="editor-label">         @html.labelfor(model => model.provinceid)     </div>     <div class="editor-field">         @html.dropdownlist("provinceid", string.format("--- {0} {1} ---", @resources.resources.select, @resources.resources.province))         @html.validationmessagefor(model => model.provinceid)     </div>      <p>         <input type="submit" value=@resources.resources.create  />     </p> </fieldset> 

}

here need load "provinces" exists in "country". i.e when country selected, provinces exists in selected country need loaded province drop down.

for case i've added script this.

<script type="text/javascript">     $(document).ready(function () {         //dropdownlist selectedchange event         $("#countryid").change(function () {             debugger;             $("#provinceid").empty();             $.ajax({                 type: 'post',                 url: "projectcontroller/getprovincesforcountry/", /                  datatype: 'json',                  data: { countryid: $("#countryid").val() },                  success: function (provinces) {                      $.each(data, function (i) {                         var optionhtml = '<option value="' +                 data[i].id + '">' + data[i].name + '</option>';                         $("#provinceid").append(optionhtml);                     });                  },                 error: function (ex) {                     debugger;                     alert( ex.tostring());                 }             });             return false;         })     }); </script> 

here method in controller

public jsonresult getprovincesforcountry(int countryid) {     return json(db.provinces.where(x => x.countryid.equals(countryid)).tolist()); } 

but when i'm selecting country drop down message comes [object object]

here country,province model classes

public class country {     public int id { get; set; }     public string name { get; set; } }  public class province {     [key]     public int id { get; set; }     public string name { get; set; }      [foreignkey("country")]     public int countryid { get; set; }              public country country { get; set; } }