ASP.NET MVC中下拉列表的实现

可以通过jQuery的ajax请求在页面重实现级联列表的效果，主要步骤如下：

1，扩展jQuery函数，编写清空何加载下拉列表的函数，代码如下：

(function($) { $.fn.emptySelect = function() { return this.each(function() { if (this.tagName == 'SELECT') this.options.length = 0; }); } $.fn.loadSelect = function(optionsDataArray) { return this.emptySelect().each(function() { if (this.tagName == 'SELECT') { var selectElement = this; $.each(optionsDataArray, function(index, optionData) { var option = new Option(optionData.caption, optionData.value); if ($.browser.msie) { selectElement.add(option); } else { selectElement.add(option, null); } }); } }); } } )(jQuery);

2，在controller中编写方法，从数据库中取得数据并序列化为JSON对象，源代码如下：

// //Get kinds public ActionResult getKinds() { //IQueryable<SelectData> sl; //SelectData[] sl = new SelectData[1]; //int i = 0; List<SelectData> sl = new List<SelectData>(); var kinds = infoRepository.FindAllKinds(); foreach (var kind in kinds) { SelectData sd = new SelectData() { caption = kind.kind_desc, value = kind.info_kind.ToString() }; sl.Add(sd); } return Json(sl); } // //Get classes public ActionResult getClasses(int info_kind) { List<SelectData> sl = new List<SelectData>(); var classes = infoRepository.FindClassesByKind(info_kind); foreach(var infoclass in classes) { SelectData sd = new SelectData() { caption = infoclass.class_desc, value = infoclass.info_class.ToString() }; sl.Add(sd); } return Json(sl); }

3，在view中通过JQUERY发出ajax请求在服务器段取得数据并生成下拉列表，在父列表中的change事件中动态改变子列表的option,源代码如下：

$(function() { var url = window.location.href.replace(/Create/, "getKinds"); $.getJSON(url, function(data) { $('#info_kind').loadSelect(data); }); var url2 = window.location.href.replace(/Create/, "getClasses"); // var kindValue = $(this).val(); // alert(kindValue); $.getJSON( url2, { info_kind: 0 }, function(data) { $('#info_class').loadSelect(data); } ); $('#info_kind').change(function() { var url = window.location.href.replace(/Create/, 'getClasses'); // alert(url); var kindValue = $(this).val(); var info_class = $('#info_class'); // alert(info_class); $.getJSON( url, { info_kind: kindValue }, function(data) { info_class.loadSelect(data); } ); }); } )