jquery - How to get the Json object for drop down?

Question

after trying much more on cascading drop down I decided to do it by Jquery.

This is in my cityController

public ActionResult States(int id)  
     {
         AcademicERP.Models.AcademicERPDataContext dc = new AcademicERPDataContext();
         var states = from s in dc.States
                      where s.CountryID == id
                      select s;
         return Json(states.ToList());  
     }

and I am trying to call it from

city/create page having script

    var ddlCountry;
var ddlStateID;

function pageLoad() {
    ddlStateID = $get("StateID");
    ddlCountry = $get("CountryID");
    $addHandler(ddlCountry, "change", bindOptions);
    bindOptions();
}
 function bindOptions() {
    ddlStateID.options.length = 0;        
    var CountryID = ddlCountry.value;
    if (CountryID) {
// some logic to call $.getJSON()
        }

and I have DD in views

<%= Html.DropDownList("CountryID") %>
<select name="StateID" id="StateID"></select>

so what would be a getJSON parameter? I am referring blog. but not working.

Answer 1

Like this:

function bindOptions() 
{
    ddlStateID.options.length = 0;
    var CountryID = ddlCountry.value;
    if (CountryID) 
    {
        var url = "/<YOUR CONTROLLER NAME>/States/" + CountryID;
        $.get(url, function(data) {
            // do you code to bind the result back to your drop down
        });
    }
}

OR, instead of using pageLoad, I would use it purely by jQuery:

$(document).ready(function() {
    $("#CountryID").change(function() {
        var strCountryIDs = "";
        $("#CountryID option:selected").each(function() {
            strCountryIDs += $(this)[0].value;
        });

        var url = "/<YOUR CONTROLLER NAME>/States/" + strCountryIDs;
        $.getJSON(url, null, function(data) {
            $("#StateID").empty();
            $.each(data, function(index, optionData) {
                $("#StateID").append("<option value='" 
                    + optionData.StateID 
                    + "'>" + optionData.StateName 
                    + "</option>");
            });
        });
    });
});

Something like that ...