二級聯(lián)動，簡單的說就是，當下拉列表a1的的值改變時，下一級下拉列表b1也跟著動，但是下拉列表b1的值是與下拉列表a1的值相對應的。比如：a1選中“技術部”的話，b1的所有下拉項都顯示的是與a1相對應的技術部成員，這個過程因為都是在客戶端執(zhí)行的不會在服務器端操作所以是無刷新實現(xiàn)的。
三級聯(lián)動或多級聯(lián)動，就是利用二級聯(lián)動的思想，第一級改變時，第二級跟著變，第三級跟著第二級變，第四級跟著第三級變。。。。
二級聯(lián)動，三級聯(lián)動，多級聯(lián)動實踐：
二級聯(lián)動，當?shù)谝患夁x中一個改變選項，激發(fā)聯(lián)動函數(shù)，這個函數(shù)用以改變第二個下拉列表的值，實現(xiàn)過程是，根據(jù)第一級傳過來的值遍歷數(shù)組，找到與第一級相對應的選項，然后加到第二級列表上。
三級聯(lián)動或多級聯(lián)動，第一級改變時，第二級跟著變，第二級改變時，第三級跟著變。
二級聯(lián)動下拉列表的實現(xiàn)是通過一個函數(shù)來實現(xiàn)的，如果在實現(xiàn)三級聯(lián)動下拉列表或多級聯(lián)動下拉列表的話，我們是直接復制二級聯(lián)動下拉列表的函數(shù)，改一下函數(shù)名及相關參數(shù)，這樣是可以解決問題的，但咱們是做程序的，應該讓自己的程序更通用話，盡量適應各種情況，如果這樣一來，平白的又添加了一個函數(shù)，并且如果是多級的話您就得重寫這個函數(shù)多次，然而，您也許會想到，多級聯(lián)動下拉列表與二級其實思想是一樣的，那么我們?yōu)槭裁床荒苡靡粋€函數(shù)來實現(xiàn)呢，并且一定是可以實現(xiàn)的，但這樣實現(xiàn)的人很少，為什么呢，一般都覺得沒這個必要，但每次遇到這樣的問題時還是得研究半天，今天我要給大家介紹的是，一個函數(shù)來實現(xiàn)多級聯(lián)動，使用的是類似與遞歸的思想，每一級onchange()時都會調用一個函數(shù)，這個函數(shù)會改變下一級的值并激發(fā)其onchange()，這時下一級的onchange里如果還是調用這個函數(shù)的話，那么這個函數(shù)還會再次運行，直到最后一級，因為最后一級onchange=所以他不會再激發(fā)下一級，完成所有聯(lián)動。
數(shù)組數(shù)據(jù)源可以接受兩種：
1.[categoryname,parentcategoryname] 即：[當前名稱,父級名稱]
2.['categoryname','parentid','nowid'] 即：[當前名稱,父級id,當前id]
上面說的父級，如果本身就是最上一級，那么父級就寫成0或0
調用方法：
網(wǎng)頁各級聯(lián)（聯(lián)動）下拉列表必須含有兩個屬性：id,onchange.
最后一個下拉列表onchange=(空，但必須寫上)。
函數(shù)調用方法：changeselect(上一級的值,下一級select控件的id值,下一級select控件要選中的值(即value而非text),數(shù)據(jù)源數(shù)組名,默認顯示字符(如:請選擇...如果不寫的話會用默認值填充))，
舉例：
第一級<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>
設置網(wǎng)頁加載完后運行一次，可以設置默認值，默認狀態(tài)下第一個參數(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>無標題文檔</title>
<script language=javascript type=text/javascript>
//changeselect(上一級的值,下一級select控件的id值,下一級select控件要選中的值(即value而非text),數(shù)據(jù)源數(shù)組名,默認顯示字符(如:請選擇...如果不寫的話會用默認值填充))，第一級的上級值為0
function changeselect(parentvalue, nextid, nextselectedvalue, arrobj,defaultstr)
{
strobj = eval(document.getelementbyid(nextid));
strobj.length = 0;
//判斷它是二級數(shù)據(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===請選擇==;
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;
}
}
//激發(fā)下一級的onchange事件以實現(xiàn)多級級聯(lián)
strobj.onchange();
}
//公司二維數(shù)組數(shù)據(jù)源
office = [
[categoryname,parentcategoryname],
[業(yè)務部,0],
[技術部,0],
[市場部,0],
[業(yè)務部小柳,業(yè)務部],
[業(yè)務部小楊,業(yè)務部],
[業(yè)務部小菜,業(yè)務部],
[技術部老柳,技術部],
[技術部老楊,技術部],
[技術部老菜,技術部],
[市場部柳先生,市場部],
[市場部楊先生,市場部],
[市場部菜鳥,市場部]
]
//省市二維數(shù)組數(shù)據(jù)源
city2 = [
[categoryname,parentcategoryname],
[山西省,0],
[河北省,0],
[太原市,山西省],
[運城市,山西省],
[石家莊,河北省],
[廊房,河北省]
]
//省市三維數(shù)組數(shù)據(jù)源
city3 = [
[categoryname,parentid,id],
[北京,0,010],
[山西,0,0359],
[朝陽區(qū),010,001],
[海淀區(qū),010,002],
[豆各莊,001,101],
[十里堡,001,102],
[中關村,002,201],
[上地,002,202],
[運城地區(qū),0359,301],
[太原市,0359,302],
[永濟市,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>