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

}

);

});

}

)