恢復內容開始 第一次發表博文，發表博文的目的是鞏固自己的技術，也能夠共用給大家。寫的不好的地方，希望大家多給給意見。老司機勿噴 數據結構（） NewsTypeId 新聞ID， NewsTypeName 新聞名稱 NewsTypeParentId 父級ID 後臺語言：ASP.NET MVC4 後臺代碼 ...
---恢復內容開始---
第一次發表博文，發表博文的目的是鞏固自己的技術，也能夠共用給大家。寫的不好的地方，希望大家多給給意見。老司機勿噴
數據結構（）
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>
---恢復內容結束---
