ASP.NET MVC关于Ajax以及Jquery的无限级联动

---恢复内容开始---

第一次发表博文，发表博文的目的是巩固自己的技术，也能够共享给大家。写的不好的地方，希望大家多给给意见。老司机勿喷

数据结构（）

NewsTypeId 新闻ID，

NewsTypeName 新闻名称

NewsTypeParentId 父级ID

后台语言：ASP.NET MVC4

后台代码：

/// <summary>

/// JSON格式的List集合

/// </summary>

/// <returns></returns>

public JsonResult FnNewsTypeList()

{

int NewsTypeParentId = -1;

if (!string.IsNullOrEmpty(Request["NewsTypeParentId"]))

{

NewsTypeParentId = Convert.ToInt32(Request["NewsTypeParentId"]);

}

Maticsoft.BLL.NewsType NTbll = new Maticsoft.BLL.NewsType();

StringBuilder strWhere = new StringBuilder();

if (NewsTypeParentId != -1)

{

strWhere.AppendLine(" AND NewsTypeParentId ='" + NewsTypeParentId+"'");

}

List<Maticsoft.Model.NewsType> NTList = NTbll.NewsTypeList(strWhere.ToString());

return Json(NTList);

}

页面布局：

<div class="form-group ">

<label class="col-sm-3 control-label">所属类型：</label>

<div class="col-sm-8" id="cat">

<select id="NewsTypeParentId_0" onchange="FirstChange(0)" name="NewsTypeParentId" class="form-control" aria-describedby="firstname-error" aria-invalid="true">

<option value="0">请选择</option>

<option value="1">1</option>

</select>

</div>

</div>

Jquery语言：

Jquery代码：

//页面第一次加载时，将父级为最高级的类型读取出来

<script>

$(function () {

$.ajax({

type: "POST",

url: "/NewsType/FnNewsTypeList",

data: {

NewsTypeParentId: 0

},

dataType: "JSON",

success: function (data) {

var SelectArray = new Array();

SelectArray.push("<option value=\"0\">请选择</option>")

for (var i = 0; i < data.length; i++) {

//使用Array拼接Html页面

SelectArray.push("<option value=\"");

SelectArray.push(data[i].NewsTypeId);

SelectArray.push("\">");

SelectArray.push(data[i].NewsTypeName);

SelectArray.push("</option>");

}

//寻找最高级分类追加数据

var SelectDom = $("[name=NewsTypeParentId]:eq(0)")

SelectDom.find("option").remove()

//Array 的 join 方法，将所有的Html内容连接

SelectDom.append(SelectArray.join(""))

}

})

})

//下拉框发生改变触发的时间

ThisId 是当前所属Select的Id属性

ChildId 是当前Select的下一级的Select 的ID属性

FirstChange是当下拉框改变时执行的第一个事件

function FirstChange(ThisId) {

var ChildId= parseInt(ThisId) + 1;

SecondChange(ThisId, ChildId)

}

//SecondChange 是寻找被点击Select下的所有下N级Select，如果存在，则先移除所有下级Select

function SecondChange(ThisId, ChildId) {

$("#NewsTypeParentId_" + ThisId)

var ParentVal = $("#NewsTypeParentId_" + ThisId).val();

//while循环判断下一个select 是否存在，如存在则删除直到不存在为止

doChildId= ChildId;

do {

if ($("#NewsTypeParentId_" + doChildId).length > 0) {

$("#NewsTypeParentId_" + doChildId).remove();

doChildId++;

} else {

break;

}

} while (1)

if (ParentVal != '') {

//当被点击的Select值存在时，这时已将其下属的所有Select清楚，重新调用数据进行生成

NewsTypeParentId(ParentVal, ChildId);

}

}

//Ajax读取数据进行追加生成

function NewsTypeParentId(ParentVal, ChildId) {

if (ParentVal != 0) {

$.ajax({

type: "POST",

url: "/NewsType/FnNewsTypeList",

data: {

NewsTypeParentId: ParentVal

},

dataType: "JSON",

success: function (data) {

//返回值data是JSON格式，当data存在数据时，表示存在下级，进行数据处理和Html生成

//Select的ID属性值为NewsTypeParentId_?  从第一级开始，依次为0,1,2,3,4...

if (data.length > 0) {

var SelectArray = new Array();

SelectArray.push("");

SelectArray.push("<select id=\"NewsTypeParentId_");

SelectArray.push(ChildId);

SelectArray.push("\" onchange=\"FirstChange(");

SelectArray.push(ChildId);

SelectArray.push(")\" name=\"NewsTypeParentId\" class=\"form-control\" ");

SelectArray.push("aria-describedby=\"firstname-error\" aria-invalid=\"true\">");

SelectArray.push("<option value=\"0\">请选择</option> ")

for (var i = 0; i < data.length; i++) {

SelectArray.push("<option value=\"");

SelectArray.push(data[i].NewsTypeId);

SelectArray.push("\">");

SelectArray.push(data[i].NewsTypeName);

SelectArray.push("</option> ");

}

SelectArray.push("</select>");

//最后将此Select追加至DIV末端

$("#cat").append(SelectArray.join(""))

}

}

})

}

}

Jquery最后传参数添加数据时，做某些数据处理

//ParentVal是最后一级Select的值，当未选中任何项时，则选择上一级数据

var ParentVal = $("[name=NewsTypeParentId]:last").val();

if (ParentVal == 0) {

//寻找最后一个Select的索引

//将索引-1

var SelectIndex = $("[name=NewsTypeParentId]:last").index();

SelectIndex = SelectIndex - 1;

ParentVal = $("[name=NewsTypeParentId]:eq(" + SelectIndex + ")").val();

}

</script>

---恢复内容结束---