二級(jí)聯(lián)動(dòng)，簡(jiǎn)單的說(shuō)就是，當(dāng)下拉列表A1的的值改變時(shí)，下一級(jí)下拉列表B1也跟著動(dòng)，但是下拉列表B1的值是與下拉列表A1的值相對(duì)應(yīng)的。比如：A1選中“技術(shù)部”的話，B1的所有下拉項(xiàng)都顯示的是與A1相對(duì)應(yīng)的技術(shù)部成員，這個(gè)過(guò)程因?yàn)槎际窃诳蛻舳藞?zhí)行的不會(huì)在服務(wù)器端操作所以是無(wú)刷新實(shí)現(xiàn)的。
三級(jí)聯(lián)動(dòng)或多級(jí)聯(lián)動(dòng)，就是利用二級(jí)聯(lián)動(dòng)的思想，第一級(jí)改變時(shí)，第二級(jí)跟著變，第三級(jí)跟著第二級(jí)變，第四級(jí)跟著第三級(jí)變。。。。
二級(jí)聯(lián)動(dòng)，三級(jí)聯(lián)動(dòng)，多級(jí)聯(lián)動(dòng)實(shí)踐：
二級(jí)聯(lián)動(dòng)，當(dāng)?shù)谝患?jí)選中一個(gè)改變選項(xiàng)，激發(fā)聯(lián)動(dòng)函數(shù)，這個(gè)函數(shù)用以改變第二個(gè)下拉列表的值，實(shí)現(xiàn)過(guò)程是，根據(jù)第一級(jí)傳過(guò)來(lái)的值遍歷數(shù)組，找到與第一級(jí)相對(duì)應(yīng)的選項(xiàng)，然后加到第二級(jí)列表上。
三級(jí)聯(lián)動(dòng)或多級(jí)聯(lián)動(dòng)，第一級(jí)改變時(shí)，第二級(jí)跟著變，第二級(jí)改變時(shí)，第三級(jí)跟著變。
二級(jí)聯(lián)動(dòng)下拉列表的實(shí)現(xiàn)是通過(guò)一個(gè)函數(shù)來(lái)實(shí)現(xiàn)的，如果在實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)下拉列表或多級(jí)聯(lián)動(dòng)下拉列表的話，我們是直接復(fù)制二級(jí)聯(lián)動(dòng)下拉列表的函數(shù)，改一下函數(shù)名及相關(guān)參數(shù)，這樣是可以解決問(wèn)題的，但咱們是做程序的，應(yīng)該讓自己的程序更通用話，盡量適應(yīng)各種情況，如果這樣一來(lái)，平白的又添加了一個(gè)函數(shù)，并且如果是多級(jí)的話您就得重寫這個(gè)函數(shù)多次，然而，您也許會(huì)想到，多級(jí)聯(lián)動(dòng)下拉列表與二級(jí)其實(shí)思想是一樣的，那么我們?yōu)槭裁床荒苡靡粋€(gè)函數(shù)來(lái)實(shí)現(xiàn)呢，并且一定是可以實(shí)現(xiàn)的，但這樣實(shí)現(xiàn)的人很少，為什么呢，一般都覺(jué)得沒(méi)這個(gè)必要，但每次遇到這樣的問(wèn)題時(shí)還是得研究半天，今天我要給大家介紹的是，一個(gè)函數(shù)來(lái)實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)，使用的是類似與遞歸的思想，每一級(jí)onchange()時(shí)都會(huì)調(diào)用一個(gè)函數(shù)，這個(gè)函數(shù)會(huì)改變下一級(jí)的值并激發(fā)其onchange()，這時(shí)下一級(jí)的onchange里如果還是調(diào)用這個(gè)函數(shù)的話，那么這個(gè)函數(shù)還會(huì)再次運(yùn)行，直到最后一級(jí)，因?yàn)樽詈笠患?jí)onchange=""所以他不會(huì)再激發(fā)下一級(jí)，完成所有聯(lián)動(dòng)。
數(shù)組數(shù)據(jù)源可以接受兩種：
1.["CategoryName","ParentCategoryName"] 即：["當(dāng)前名稱","父級(jí)名稱"]
2.['CategoryName','ParentId','NowId'] 即：["當(dāng)前名稱","父級(jí)ID","當(dāng)前ID"]
上面說(shuō)的父級(jí)，如果本身就是最上一級(jí)，那么父級(jí)就寫成0或"0"
調(diào)用方法：
網(wǎng)頁(yè)各級(jí)聯(lián)（聯(lián)動(dòng)）下拉列表必須含有兩個(gè)屬性：id,onchange.
最后一個(gè)下拉列表onchange=""(空，但必須寫上)。
函數(shù)調(diào)用方法：ChangeSelect(上一級(jí)的值,下一級(jí)Select控件的ID值,下一級(jí)Select控件要選中的值(即value而非text),數(shù)據(jù)源數(shù)組名,默認(rèn)顯示字符(如:請(qǐng)選擇...如果不寫的話會(huì)用默認(rèn)值填充))，
舉例：
第一級(jí)<select id="province" onchange="ChangeSelect(this.value,'city','',ArrCity3,'請(qǐng)選擇市')" ></select>
第二級(jí)<select id="city" onchange="ChangeSelect(this.value,'area','',ArrCity3)" ></select>
第三級(jí)<select id="area" onchange="" ></select>
設(shè)置網(wǎng)頁(yè)加載完后運(yùn)行一次，可以設(shè)置默認(rèn)值，默認(rèn)狀態(tài)下第一個(gè)參數(shù)是0
看代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無(wú)標(biāo)題文檔</title>
<script language="JavaScript" type="text/javascript">
//ChangeSelect(上一級(jí)的值,下一級(jí)Select控件的ID值,下一級(jí)Select控件要選中的值(即value而非text),數(shù)據(jù)源數(shù)組名,默認(rèn)顯示字符(如:請(qǐng)選擇...如果不寫的話會(huì)用默認(rèn)值填充))，第一級(jí)的上級(jí)值為0
function ChangeSelect(ParentValue, NextId, NextSelectedValue, ArrObj,DefaultStr)
{
StrObj = eval(document.getElementById(NextId));
StrObj.length = 0;
//判斷它是二級(jí)數(shù)據(jù)源，還是三級(jí)
if (ArrObj.length > 0)
{
if (ArrObj[0].length == 2)
{ArrNum = 0;}
else
{ArrNum = 2;}
}
//顯示所有列表
for (i = 0; i < ArrObj.length; i++)
{
if (i == 0)
{
if (DefaultStr == undefined ) DefaultStr="==請(qǐng)選擇==";
StrObj.options[StrObj.length] = new Option(DefaultStr, "");
}
if (ArrObj[i][1] == ParentValue)
{
StrObj.options[StrObj.length] = new Option(ArrObj[i][0],ArrObj[i][ArrNum]);
}
}
//選中列表內(nèi)某一項(xiàng)
for (i = 0; i < StrObj.length; i++)
{
if (StrObj.options[i].value == NextSelectedValue)
{
StrObj.options[i].selected = true;
}
}
//激發(fā)下一級(jí)的onchange事件以實(shí)現(xiàn)多級(jí)級(jí)聯(lián)
StrObj.onchange();
}
//公司二維數(shù)組數(shù)據(jù)源
Office = [
["CategoryName","ParentCategoryName"],
["業(yè)務(wù)部","0"],
["技術(shù)部","0"],
["市場(chǎng)部","0"],
["業(yè)務(wù)部小柳","業(yè)務(wù)部"],
["業(yè)務(wù)部小楊","業(yè)務(wù)部"],
["業(yè)務(wù)部小菜","業(yè)務(wù)部"],
["技術(shù)部老柳","技術(shù)部"],
["技術(shù)部老楊","技術(shù)部"],
["技術(shù)部老菜","技術(shù)部"],
["市場(chǎng)部柳先生","市場(chǎng)部"],
["市場(chǎng)部楊先生","市場(chǎng)部"],
["市場(chǎng)部菜鳥(niǎo)","市場(chǎng)部"]
]
//省市二維數(shù)組數(shù)據(jù)源
City2 = [
["CategoryName","ParentCategoryName"],
["山西省","0"],
["河北省","0"],
["太原市","山西省"],
["運(yùn)城市","山西省"],
["石家莊","河北省"],
["廊房","河北省"]
]
//省市三維數(shù)組數(shù)據(jù)源
City3 = [
["CategoryName","ParentId","Id"],
["北京","0","010"],
["山西","0","0359"],
["朝陽(yáng)區(qū)","010","001"],
["海淀區(qū)","010","002"],
["豆各莊","001","101"],
["十里堡","001","102"],
["中關(guān)村","002","201"],
["上地","002","202"],
["運(yùn)城地區(qū)","0359","301"],
["太原市","0359","302"],
["永濟(jì)市","301","311"],
["小區(qū)","302","312"]
];
</script>
</head>
<body>
<select id="office1" onchange="ChangeSelect(this.value,'office2','',Office,'==人員==')" style="width:100px"></select>
<select id="office2" onchange="" style="width:100px"></select>
<script language="JavaScript" type="text/javascript">ChangeSelect('0','office1','',Office,'==部門==') </script>
<br />
<select id="City001" onchange="ChangeSelect(this.value,'City002','',City2)" style="width:100px"></select>
<select id="City002" onchange="" style="width:100px"></select>
<script language="JavaScript" type="text/javascript">ChangeSelect('0','City001','',City2) </script>
<br />
<select id="City3001" onchange="ChangeSelect(this.value,'City3002','',City3)" style="width:100px"></select>
<select id="City3002" onchange="ChangeSelect(this.value,'City3003','',City3)" style="width:100px"></select>
<select id="City3003" onchange="" style="width:100px"></select>
<script language="JavaScript" type="text/javascript">ChangeSelect('0','City3001','0359',City3) </script>
<br />
</body>
</html>
更多信息請(qǐng)查看IT技術(shù)專欄
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試