How to return the appropriate results with JSON in order to populate cascading drop down lists?

I'm trying to populate a second drop down list (which contains coun开发者_开发百科ties) depending on what is selected on the first drop down list (which contains countries).

I have a controller action called GetCounties:

  public JsonResult GetCounties(string id)
    {
        DBEntities dc = new DBEntities();
        JsonResult result = new JsonResult();
        var filteredDivisions = from div in dc.Divisions
                                where div.CountryID == 1 //id
                                select div;
        result.Data = filteredDivisions.ToList();        
        return Json(result.Data, JsonRequestBehavior.AllowGet);          

        //         return Json(new[] {
        //    new { Id = filteredDivisions.ToArray()[0].DivisionID, Value = filteredDivisions.ToArray()[0].DivisionName },
        //    new { Id = 2, Value = "value 2" },
        //    new { Id = 3, Value = "value 3" },
        //}, JsonRequestBehavior.AllowGet);
    }

Notice the section that is commented out. That works fine for me, (I get the first value from the divisions list, and the other two called "value 2" and "value 3". I used that there to test the callback, but it was the only thing that gave me results. Using:

 return Json(result.Data, JsonRequestBehavior.AllowGet);     

doesn't achieve anything on the view side. When debugging, all the right values are there, but they don't come up on the view side's drop down list. As I said, the only results I get is by using the code that is commented out (the hardcoded values, which of course are not good enough). I tried to use for loops to iterate through the list in order to populate the array, but nothing works, I get errors like anonymous type is read only so I cannot set it again.

This is my jquery code:

  $(function () {
            $.getJSON('/Entity/GetCounties', function (result) {
                var ddl = $('#DivisionsList');
                ddl.empty();
                $(result).each(function () {
                    $(document.createElement('option'))
            .attr('value', this.Id)
            .text(this.Value)
            .appendTo(ddl);
                });
            });
        });

The divisionslist is of course the dropdown with all the counties, which by using the non-commented return statement above, just returns unchanged, i.e. containing ALL of its values, and not just the ones that should come up depending on the selected country. so please HOW CAN I POPULATE AN ARRAY WITH THE FILTERED RESULTS SO THAT I CAN RETURN IT TO THE VIEW USING JSON? I want to use THIS code that I have posted, as it was THE ONLY ONE that ever worked. I just need to swap the hardcoded values with the right ones. that's where i'm having trouble.

please help me.

---

$.getJSON('/Entity/GetCounties', {id: $('#yourCountrySelect').val()},function (result) {

and now I will read your wall of text ^^

---

I solved it myself. What i did is this:

   public JsonResult GetDivisions(int id)
    {
        ASNEntities dc = new ASNEntities();
        JsonResult result = new JsonResult();
        var filteredDivisions = from div in dc.Divisions
                                where div.CountryID == id
                                select div;

        List<object> listToReturn = new List<object>();

        for (int i = 0; i < filteredDivisions.Count(); i++)
        {
            Object[] obj = new[]{
             new { Id = filteredDivisions.ToArray()[i].DivisionID, Value = filteredDivisions.ToArray()[i].DivisionName },
        };

           listToReturn.Add(obj[0]);              
        }

        return Json(listToReturn.ToArray(), JsonRequestBehavior.AllowGet);

        //return Json(new[] {
        //    new { Id = filteredDivisions.ToArray()[0].DivisionID, Value = filteredDivisions.ToArray()[0].DivisionName },
        //    new { Id = 2, Value = "value 2" },
        //    new { Id = 3, Value = "value 3" },
        //}, JsonRequestBehavior.AllowGet);

    }

and it works great.