重新设置元素后刷新下拉列表

Question

我有一个asp.net mvc 2应用程序，并且有一些jQuery定义了两个下拉列表的行为。当一个改变时，另一个填充过滤的数据。经过大量的讨论，我有jquery的工作，通过萤火虫调试确认，但我的下拉列表并不令人耳目一新。这是jQuery的

<script type="text/javascript"> 

     $(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); 
        }); 
       }); 
      }; 
     }); 

    </script> 

这里是我的控制器行动

public ActionResult FilterFieldOffices(int companyId = 0) 
    { 
     IList<FieldOffice> list = _fodp.GetFieldOfficesForCompany(companyId); 

     var returnList = new SelectList(list, "Id", "FacilityName"); 

     return Json(returnList); 
    } 

所以，我知道，下拉列表中填充有正确的数据，但视图页面上的下拉列表是不爽快。我对JQuery的知识有限，所以如果我缺少像温柔一样的东西。因为在内部它不再指向select元素

$(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); 
      }); 
     }); 
    }; 
}); 

请注意，我们需要捕获this外的foreach：

Answer 1

试试这个。

全部工作示例：

型号：

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<Item> Companies { get; set; } 
    public IEnumerable<Item> FieldOffices { get; set; } 
} 

控制器：

[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<Item>() 
     }; 
     return View(model); 
    } 

    public ActionResult FilterFieldOffices(int companyId) 
    { 
     return Json(Enumerable.Range(1, 3).Select(i => new Item 
     { 
      Value = i, 
      Text = "Field offfice " + i 
     })); 
    } 
} 

查看：

<script type="text/javascript" src="<%= Url.Content("~/scripts/jquery-1.4.1.js") %>"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#cid').change(function() { 
      var coid = $(this).val(); 
      $.post('<%= Url.Action("FilterFieldOffices") %>', { companyId: coid }, function (data) { 
       $('#foid').loadSelect(data); 
      }); 
     }); 
    }); 

    $(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); 
       }); 
      }); 
     }; 
    }); 

</script> 

<% 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" })%> 
    <input type="submit" value="OK" /> 
<% } %>