實現(xiàn)效果
數(shù)據(jù)結(jié)構(gòu)樣式锣吼，采用json格式
HTML結(jié)構(gòu)
<div class="text-c">
倉庫名稱：
<select class="select" style="width: 150px" size="1" name="ckno" id="ckno">
<option value="" selected>請選擇倉庫</option>
</select>
專業(yè)名稱：
<select class="select" style="width: 150px" size="1" name="xmno" id="zyno">
<option value="" selected>請選擇專業(yè)</option>
</select>
項目名稱：
<select class="select" style="width: 150px" size="1" name="xmno" id="xmno">
<option value="" selected>請選擇項目</option>
</select>
</div>
效果一：需要手動一級一級點開
var data_select = [];
//獲取級聯(lián)需要的json數(shù)據(jù)
$.ajax({
type: "post",
url: "/admin/AdminHandler.ashx",
data: { "operation": "GetCKZYXMList" },
success: function (data, status) {
data_select = data;
for (var i = 0; i < data_select.ListCK.length; i++) {
$("#ckno").append("<option value='" + data_select.ListCK[i].CKNo + "'>" + data_select.ListCK[i].CKName + "</option>");
}
},
});
$("#ckno").change(function () {
//清空option
$("#zyno").find("option").remove();
$("#xmno").find("option").remove();
$("#zyno").append("<option value='' selected>請選擇專業(yè)</option>");
$("#xmno").append("<option value='' selected>請選擇項目</option>");
var ckno_zy = $(this).val();
if (ckno_zy != "") {
for (var i = 0; i < data_select.ListCK.length; i++) {
if (data_select.ListCK[i].CKNo == ckno_zy) {
for (var j = 0; j < data_select.ListCK[i].ZYList.length; j++) {
$("#zyno").append("<option value='" + data_select.ListCK[i].ZYList[j].ZYNo + "'>" + data_select.ListCK[i].ZYList[j].ZYName + "</option>");
}
}
}
}
});
$("#zyno").change(function () {
//清空option
$("#xmno").find("option").remove();
$("#xmno").append("<option value='' selected>請選擇項目</option>");
var ckno_zy = $('#ckno option:selected').val();
var zyno_xm = $(this).val();
for (var i = 0; i < data_select.ListCK.length; i++) {
if (data_select.ListCK[i].CKNo == ckno_zy) {
for (var j = 0; j < data_select.ListCK[i].ZYList.length; j++) {
if (data_select.ListCK[i].ZYList[j].ZYNo == zyno_xm) {
for (var k = 0; k < data_select.ListCK[i].ZYList[j].XMList.length; k++) {
$("#xmno").append("<option value='" + data_select.ListCK[i].ZYList[j].XMList[k].XMNo + "'>" + data_select.ListCK[i].ZYList[j].XMList[k].XMName + "</option>");
}
}
}
}
}
});
效果二：點開上一級自動綁定全部下拉框
$.ajax({
type: "post",
url: "/admin/AdminHandler.ashx",
data: { "operation": "GetCKZYXMList" },
success: function (data, status) {
data_select = data;
for (var i = 0; i < data_select.ListCK.length; i++) {
$("#ckno").append("<option value='" + data_select.ListCK[i].CKNo + "'>" + data_select.ListCK[i].CKName + "</option>");
}
},
});
$("#ckno").change(function () {
//清空option
$("#zyno").find("option").remove();
$("#xmno").find("option").remove();
var ckno_zy = $(this).val();
if (ckno_zy == "") {
$("#zyno").append("<option value='' selected>請選擇專業(yè)</option>");
$("#xmno").append("<option value='' selected>請選擇項目</option>");
} else {
for (var i = 0; i < data_select.ListCK.length; i++) {
if (data_select.ListCK[i].CKNo == ckno_zy) {
for (var j = 0; j < data_select.ListCK[i].ZYList.length; j++) {
$("#zyno").append("<option value='" + data_select.ListCK[i].ZYList[j].ZYNo + "'>" + data_select.ListCK[i].ZYList[j].ZYName + "</option>");
}
for (var k = 0; k < data_select.ListCK[i].ZYList[0].XMList.length; k++) {
$("#xmno").append("<option value='" + data_select.ListCK[i].ZYList[0].XMList[k].XMNo + "'>" + data_select.ListCK[i].ZYList[0].XMList[k].XMName + "</option>");
}
}
}
}
});
$("#zyno").change(function () {
//清空option
$("#xmno").find("option").remove();
var ckno_zy = $('#ckno option:selected').val();
var zyno_xm = $(this).val();
for (var i = 0; i < data_select.ListCK.length; i++) {
if (data_select.ListCK[i].CKNo == ckno_zy) {
for (var j = 0; j < data_select.ListCK[i].ZYList.length; j++) {
if (data_select.ListCK[i].ZYList[j].ZYNo == zyno_xm) {
for (var k = 0; k < data_select.ListCK[i].ZYList[j].XMList.length; k++) {
$("#xmno").append("<option value='" + data_select.ListCK[i].ZYList[j].XMList[k].XMNo + "'>" + data_select.ListCK[i].ZYList[j].XMList[k].XMName + "</option>");
}
}
}
}
}
});
解釋一下這串代碼：
最開始的第一個ajax是獲取一整個json數(shù)據(jù)串的瘦锹，然后直接綁定第一級的倉庫帐偎。同時創(chuàng)建倉庫和專業(yè)的change()方法。點擊之后就會給下一級生成數(shù)據(jù)腿宰。
效果一和效果二的區(qū)別：效果一選中上一級下拉框后抚吠，不會強制給剩下的所有下拉框綁定數(shù)據(jù)福铅，而是只會給下一級的下拉框綁定數(shù)據(jù)。只能一級一級的選擇狸演，不能越級操作言蛇。比如第一級下拉框選擇了A[1]數(shù)據(jù)后，會給第二級下拉框默認賦上A[1].B[1]的數(shù)據(jù)宵距，但是在第二級選擇前腊尚，是不會給第三級下拉框進行默認賦值。
效果二則是選中上一級下拉框后满哪，默認給下面的所有級別下拉框綁定第一個的默認數(shù)據(jù)婿斥。比如第一級下拉框選擇了A[1]數(shù)據(jù)后劝篷。會給第二級下拉框默認賦上A[1].B[1]的數(shù)據(jù)，第三級綁定A[1].B[1].C[1]的數(shù)據(jù)民宿。
具體怎么使用還是需要根據(jù)實際的需求和生產(chǎn)環(huán)境來選擇不同的實現(xiàn)效果娇妓。
