二級聯動，簡單的說就是，當下拉列表A1的的值改變時，下一級下拉列表B1也跟著動，但是下拉列表B1的值是與下拉列表A1的值相對應的。比如：A1選中“技術部”的話，B1的所有下拉項都顯示的是與A1相對應的技術部成員，這個過程因為都是在客戶端執行的不會在服務器端操作所以是無刷新實現的。
三級聯動或多級聯動，就是利用二級聯動的思想，第一級改變時，第二級跟著變，第三級跟著第二級變，第四級跟著第三級變。。。。
二級聯動，三級聯動，多級聯動實踐：
二級聯動，當第一級選中一個改變選項，激發聯動函數，這個函數用以改變第二個下拉列表的值，實現過程是，根據第一級傳過來的值遍歷數組，找到與第一級相對應的選項，然后加到第二級列表上。
三級聯動或多級聯動，第一級改變時，第二級跟著變，第二級改變時，第三級跟著變。
二級聯動下拉列表的實現是通過一個函數來實現的，如果在實現三級聯動下拉列表或多級聯動下拉列表的話，我們是直接復制二級聯動下拉列表的函數，改一下函數名及相關參數，這樣是可以解決問題的，但咱們是做程序的，應該讓自己的程序更通用話，盡量適應各種情況，如果這樣一來，平白的又添加了一個函數，并且如果是多級的話您就得重寫這個函數多次，然而，您也許會想到，多級聯動下拉列表與二級其實思想是一樣的，那么我們為什么不能用一個函數來實現呢，并且一定是可以實現的，但這樣實現的人很少，為什么呢，一般都覺得沒這個必要，但每次遇到這樣的問題時還是得研究半天，今天我要給大家介紹的是，一個函數來實現多級聯動，使用的是類似與遞歸的思想，每一級onchange()時都會調用一個函數，這個函數會改變下一級的值并激發其onchange()，這時下一級的onchange里如果還是調用這個函數的話，那么這個函數還會再次運行，直到最后一級，因為最后一級onchange=""所以他不會再激發下一級，完成所有聯動。
數組數據源可以接受兩種：
1.["CategoryName","ParentCategoryName"] 即：["當前名稱","父級名稱"]
2.['CategoryName','ParentId','NowId'] 即：["當前名稱","父級ID","當前ID"]
上面說的父級，如果本身就是最上一級，那么父級就寫成0或"0"
調用方法：
網頁各級聯（聯動）下拉列表必須含有兩個屬性：id,onchange.
最后一個下拉列表onchange=""(空，但必須寫上)。
函數調用方法：ChangeSelect(上一級的值,下一級Select控件的ID值,下一級Select控件要選中的值(即value而非text),數據源數組名,默認顯示字符(如:請選擇...如果不寫的話會用默認值填充))，
舉例：
第一級<select id="province" onchange="ChangeSelect(this.value,'city','',ArrCity3,'請選擇市')" ></select>
第二級<select id="city" onchange="ChangeSelect(this.value,'area','',ArrCity3)" ></select>
第三級<select id="area" onchange="" ></select>
設置網頁加載完后運行一次，可以設置默認值，默認狀態下第一個參數是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>無標題文檔</title>
<script language="JavaScript" type="text/javascript">
//ChangeSelect(上一級的值,下一級Select控件的ID值,下一級Select控件要選中的值(即value而非text),數據源數組名,默認顯示字符(如:請選擇...如果不寫的話會用默認值填充))，第一級的上級值為0
function ChangeSelect(ParentValue, NextId, NextSelectedValue, ArrObj,DefaultStr)
{
StrObj = eval(document.getElementById(NextId));
StrObj.length = 0;
//判斷它是二級數據源，還是三級
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="==請選擇==";
StrObj.options[StrObj.length] = new Option(DefaultStr, "");
}
if (ArrObj[i][1] == ParentValue)
{
StrObj.options[StrObj.length] = new Option(ArrObj[i][0],ArrObj[i][ArrNum]);
}
}
//選中列表內某一項
for (i = 0; i < StrObj.length; i++)
{
if (StrObj.options[i].value == NextSelectedValue)
{
StrObj.options[i].selected = true;
}
}
//激發下一級的onchange事件以實現多級級聯
StrObj.onchange();
}
//公司二維數組數據源
Office = [
["CategoryName","ParentCategoryName"],
["業務部","0"],
["技術部","0"],
["市場部","0"],
["業務部小柳","業務部"],
["業務部小楊","業務部"],
["業務部小菜","業務部"],
["技術部老柳","技術部"],
["技術部老楊","技術部"],
["技術部老菜","技術部"],
["市場部柳先生","市場部"],
["市場部楊先生","市場部"],
["市場部菜鳥","市場部"]
]
//省市二維數組數據源
City2 = [
["CategoryName","ParentCategoryName"],
["山西省","0"],
["河北省","0"],
["太原市","山西省"],
["運城市","山西省"],
["石家莊","河北省"],
["廊房","河北省"]
]
//省市三維數組數據源
City3 = [
["CategoryName","ParentId","Id"],
["北京","0","010"],
["山西","0","0359"],
["朝陽區","010","001"],
["海淀區","010","002"],
["豆各莊","001","101"],
["十里堡","001","102"],
["中關村","002","201"],
["上地","002","202"],
["運城地區","0359","301"],
["太原市","0359","302"],
["永濟市","301","311"],
["小區","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>
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
