Actualizar una lista desplegable después de que se hayan restablecido los elementos

Tengo una aplicación mvc 2 de asp.net y tengo algunos jquery que definen el comportamiento de dos listas desplegables. Cuando uno cambia, el otro se llena con datos filtrados. Después de mucho furor, tengo el jquery en funcionamiento, confirmado por la depuración de firebug, pero mi lista desplegable no es refrescante. Este es el jQuery

 $(function () { $('#cid').change(function () { var coid = $(this).val(); $.post("/TimeTracking/FilterFieldOffices", { companyId: coid }, function (data) { $("#foid").loadSelect(data); }); }); }); $(function () { $.fn.loadSelect = function (data) { return this.each(function () { this.options.length = 0; $.each(data, function (index, itemData) { var option = new Option(itemData.Text, itemData.Value); this.add(option); }); }); }; });  

Y aquí está mi controlador de acción.

 public ActionResult FilterFieldOffices(int companyId = 0) { IList list = _fodp.GetFieldOfficesForCompany(companyId); var returnList = new SelectList(list, "Id", "FacilityName"); return Json(returnList); } 

Por lo tanto, sé que la lista desplegable se está llenando con los datos correctos, pero la lista desplegable en la página de vista no se está actualizando. Tengo un conocimiento limitado de JQuery, por lo que si me falta algo como n00b, sé amable.

Prueba esto:

 $(function () { $.fn.loadSelect = function (data) { return this.each(function () { this.options.length = 0; var select = this; $.each(data, function (index, itemData) { var option = new Option(itemData.Text, itemData.Value); $(select).append(option); }); }); }; }); 

Observe que necesitamos capturar this en el foreach externo porque en el interior ya no apunta al elemento select .

Ejemplo de trabajo completo:

Modelo:

 public class Item { public int Value { get; set; } public string Text { get; set; } } public class MyViewModel { public int? SelectedCompanyId { get; set; } public int? SelectedFieldOfficeId { get; set; } public IEnumerable Companies { get; set; } public IEnumerable FieldOffices { get; set; } } 

Controlador:

 [HandleError] public class HomeController : Controller { public ActionResult Index() { var model = new MyViewModel { Companies = Enumerable.Range(1, 5).Select(i => new Item { Value = i, Text = "Company " + i }), FieldOffices = Enumerable.Empty() }; return View(model); } public ActionResult FilterFieldOffices(int companyId) { return Json(Enumerable.Range(1, 3).Select(i => new Item { Value = i, Text = "Field offfice " + i })); } } 

Ver:

   <% using (Html.BeginForm()) { %> <%: Html.DropDownListFor(x => x.SelectedCompanyId, new SelectList(Model.Companies, "Value", "Text"), new { id = "cid" })%> <%: Html.DropDownListFor(x => x.SelectedFieldOfficeId, new SelectList(Model.FieldOffices, "Value", "Text"), new { id = "foid" })%>  <% } %>