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>
---恢复内容结束---
