我有一个asp.net mvc 2应用程序,并有一些jquery定义两个下拉列表的行为。 当一个更改时,另一个填充过滤数据。 经过多次努力,我有jquery工作,由firebug调试确认,但我的下拉列表并不令人耳目一新。 这是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); }); }); }; });
这是我的控制器动作
public ActionResult FilterFieldOffices(int companyId = 0) { IList list = _fodp.GetFieldOfficesForCompany(companyId); var returnList = new SelectList(list, "Id", "FacilityName"); return Json(returnList); }
所以,我知道dropdownlist正在填充正确的数据,但视图页面上的下拉列表并不令人耳目一新。 我对JQuery的知识有限,所以如果我错过了n00b就像是温柔的。
试试这个:
$(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); }); }); }; });
请注意,我们需要在外部foreach中捕获this
,因为在内部它不再指向select
元素。
完整的工作示例:
模型:
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; } }
控制器:
[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 })); } }
视图:
需要了解更多jQuery教程分享重置元素后刷新下拉列表,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!
<% 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" })%> <% } %>
以上就是jQuery教程分享重置元素后刷新下拉列表相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/981195.html