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

}

);

});

}

)