解析JS實(shí)現(xiàn)無刷新聯(lián)動菜單技巧

作者：admin 2010-10-08 12:06:40

這里向大家描述一下JS實(shí)現(xiàn)無刷新聯(lián)動菜單（select）的方法，所謂聯(lián)動菜單，就是后一個(gè)下拉框的選項(xiàng)是根據(jù)前一個(gè)下拉框被選中的值來決定的。

本文向大家簡單介紹一下什么是聯(lián)動菜單，以及JS實(shí)現(xiàn)無刷新聯(lián)動菜單（select）的方法，其實(shí)，聯(lián)動菜單的實(shí)現(xiàn)原理非常簡單，本文詳細(xì)介紹了聯(lián)動菜單的實(shí)現(xiàn)方式，知道了原理，我們可以很容易地制作從XML、數(shù)據(jù)庫加載的無限級聯(lián)動菜單。

JS實(shí)現(xiàn)無刷新聯(lián)動菜單（select）的方法

所謂聯(lián)動菜單，就是后一個(gè)下拉框的選項(xiàng)是根據(jù)前一個(gè)下拉框被選中的值來決定的，一個(gè)典型的應(yīng)用就是省市聯(lián)動菜單了，市的下拉選項(xiàng)是根據(jù)你選了哪個(gè)省來決定的，類似的需求我們經(jīng)常遇到，相信許多新手都被這個(gè)問題困擾過。

　　其實(shí)，聯(lián)動菜單的實(shí)現(xiàn)原理非常簡單，本文詳細(xì)介紹了聯(lián)動菜單的實(shí)現(xiàn)方式，知道了原理，我們可以很容易地制作從XML、數(shù)據(jù)庫加載的無限級聯(lián)動菜單。

聯(lián)動菜單的實(shí)現(xiàn)方法：

1.確定數(shù)據(jù)格式：

　　首先，我們介紹一下創(chuàng)建Option的語法：

　　Code:

　　varnewOption=newOption(optionText,optionvalue);

　　根據(jù)上面的語法，我們知道select選項(xiàng)分optionText和optionvalue兩個(gè)內(nèi)容，optionText即下拉框中我們看到的選項(xiàng)，而optionvalue則是提交的實(shí)際值。比如一個(gè)選項(xiàng)我們看到的是“北京”，而實(shí)際提交的值是“010”。

　　為了保持一致，我們確定選項(xiàng)的格式為：

　　Code:

　　{txt:"選項(xiàng)名",val:"選項(xiàng)值"}

　　那么一個(gè)選項(xiàng)組則是：

　　Code:

varchildArr=[];  
childArr['父選項(xiàng)值1']=[  
　　{txt:"選項(xiàng)名1",val:"選項(xiàng)值1"},  
　　{txt:"選項(xiàng)名2",val:"選項(xiàng)值2"},  
　　{txt:"選項(xiàng)名3",val:"選項(xiàng)值3"},  
　　...  
　　{txt:"選項(xiàng)名n",val:"選項(xiàng)值n"}  
]  
childArr['父選項(xiàng)值2']=[  
　　{txt:"選項(xiàng)名1",val:"選項(xiàng)值1"},  
　　{txt:"選項(xiàng)名2",val:"選項(xiàng)值2"},  
　　{txt:"選項(xiàng)名3",val:"選項(xiàng)值3"},  
　　...  
　　{txt:"選項(xiàng)名n",val:"選項(xiàng)值n"}  
]

其中“父選項(xiàng)值”是父下拉列表選中的值。

　　注意：[]和{}中的值是以“,”(逗號)分隔的，但是***一個(gè)值后面不能有“,”(逗號)，否則語法錯(cuò)誤，PHP程序員要特別注意！！！#p#

2.根據(jù)傳入的數(shù)組創(chuàng)建選項(xiàng)列表：

　　Code:

for(vari=0;i<len;i++)  
{  
　　selectObj.options[i]=newOption(optionList[i].txt,optionList[i].val);  
}

3.在設(shè)置選項(xiàng)之前，我們需要先將原有選項(xiàng)清空：

　　Code:

functionremoveOptions(selectObj)  
{  
　　if(typeofselectObj!='object')  
　　{  
　　　　selectObj=document.getElementById(selectObj);  
　　}  
　　//原有選項(xiàng)計(jì)數(shù)  
　　varlen=selectObj.options.length;  
　　for(vari=0;i<len;i++)  
　　{  
　　　　//移除當(dāng)前選項(xiàng)  
　　　　selectObj.options[0]=null;  
　　}  
}

　　注意，這里不是用selectObj.options[i]而是用的selectObj.options[0]，由于在options[0]刪除后，后面的選項(xiàng)就會補(bǔ)上，因此，我們只需要selectObj.options[0]=null。

4.設(shè)置一個(gè)提示選擇項(xiàng)和默認(rèn)選擇項(xiàng)：

　　通常我們在下拉列表中會設(shè)置一個(gè)提示選擇項(xiàng)，如：“請選擇城市”，這個(gè)選項(xiàng)值為空，作用只是提示用戶執(zhí)行選擇操作。

　　另外，下拉列表也需要能夠設(shè)置默認(rèn)選擇項(xiàng)，即在頁面加載的時(shí)候，設(shè)置選中狀態(tài)的項(xiàng)目。

　　完整代碼如下：

　　Javascript:

<scriptlanguagescriptlanguage="JavaScript"
type="text/javascript"> 
<!--　  
/**說明：將指定下拉列表的選項(xiàng)值清空　  
*作者：CodeBit.cn(http://www.CodeBit.cn)　*　  
*@param{String||Object]}selectObj目標(biāo)下拉選框的名稱或?qū)ο螅仨殹? 
*/  
functionremoveOptions(selectObj){　　  
if(typeofselectObj!='object'){　　　　  
selectObj=document.getElementById(selectObj);}　//原有選項(xiàng)計(jì)數(shù)　　  
varlen=selectObj.options.length;　　　  
for(vari=0;i<len;i++)　　{　　　　  
//移除當(dāng)前選項(xiàng)　　　　  
selectObj.options[0]=null;　　  
}}  
/**說明：設(shè)置傳入的選項(xiàng)值到指定的下拉列表中　  
*作者：CodeBit.cn(http://www.CodeBit.cn)　*　  
*@param{String||Object]}selectObj目標(biāo)下拉選框的名稱或?qū)ο螅仨殹? 
*@param{Array}optionList選項(xiàng)值設(shè)置格式：[{txt:'北京',val:'010'},  
*{txt:'上海',val:'020'}]，必須  
*@param{String}firstOption***個(gè)選項(xiàng)值，如：“請選擇”，可選，值為空  
*@param{String}selected默認(rèn)選中值，可選　  
*/  
functionsetSelectOption(selectObj,optionList,
firstOption,selected){　　  
if(typeofselectObj!='object'){　　　　  
selectObj=document.getElementById(selectObj);　　  
}　　　//清空選項(xiàng)　　  
removeOptions(selectObj);　　　//選項(xiàng)計(jì)數(shù)　　  
varstart=0;　　　　　//如果需要添加***個(gè)選項(xiàng)　　  
if(firstOption){　　　　  
selectObj.options[0]=newOption(firstOption,'');
　　//選項(xiàng)計(jì)數(shù)從1開始　　　　  
start++;　　  
}　　　  
varlen=optionList.length;　　　  
for(vari=0;i<len;i++){　　　　  
//設(shè)置option　　　　  
selectObj.options[start]=newOption(optionList[i].txt,
optionList[i].val);　　　　　  
//選中項(xiàng)　　　　  
if(selected==optionList[i].val){　　　　　　  
selectObj.options[start].selected=true;　　　　  
}　　　　　  
//計(jì)數(shù)加1　　　　  
start++;  
}}　//--> 
</script>

#p#示例代碼：

　　HTML:

<scriptlanguagescriptlanguage="JavaScript"
type="text/javascript">　  
varcityArr=[];  
cityArr['江蘇省']=[  
{txt:'南京',val:'南京'},  
{txt:'無錫',val:'無錫'},　　　　  
{txt:'徐州',val:'徐州'},　　　　  
{txt:'蘇州',val:'蘇州'},　　　　  
{txt:'南通',val:'南通'},　　　　  
{txt:'淮陰',val:'淮陰'},　　　　  
{txt:'揚(yáng)州',val:'揚(yáng)州'},　　　　  
{txt:'鎮(zhèn)江',val:'鎮(zhèn)江'},　　　　  
{txt:'常州',val:'常州'}　　  
];  
cityArr['浙江省']=[　　　　  
{txt:'杭州',val:'杭州'},　　　　　  
{txt:'寧波',val:'寧波'},　　　　  
{txt:'溫州',val:'溫州'},　　　　  
{txt:'湖州',val:'湖州'}　　  
];　  
functionsetCity(province){　　　　  
setSelectOption('city',cityArr[province],'-請選擇-');  
}　  
</script>　  
<selectnameselectname="province"id="province"
onchange="if(this.value!='')  
setCity(this.options[this.selectedIndex].value);">　　  
<optionvalueoptionvalue="">-請選擇-</option>　　  
<optionvalueoptionvalue="江蘇省">江蘇省</option>　　  
<optionvalueoptionvalue="浙江省">浙江省</option> 
</select> 
省　  
<selectnameselectname="city"id="city">　　  
<optionvalueoptionvalue="">-請選擇-</option> 
</select> 
市