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

}
)