解析JS實現無刷新聯動菜單技巧

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

開發前端

這里向大家描述一下JS實現無刷新聯動菜單（select）的方法，所謂聯動菜單，就是后一個下拉框的選項是根據前一個下拉框被選中的值來決定的。

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

JS實現無刷新聯動菜單（select）的方法

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

　　其實，聯動菜單的實現原理非常簡單，本文詳細介紹了聯動菜單的實現方式，知道了原理，我們可以很容易地制作從XML、數據庫加載的無限級聯動菜單。

聯動菜單的實現方法：

1.確定數據格式：

　　首先，我們介紹一下創建Option的語法：

　　Code:

　　varnewOption=newOption(optionText,optionvalue);

　　根據上面的語法，我們知道select選項分optionText和optionvalue兩個內容，optionText即下拉框中我們看到的選項，而optionvalue則是提交的實際值。比如一個選項我們看到的是“北京”，而實際提交的值是“010”。

　　為了保持一致，我們確定選項的格式為：

　　Code:

　　{txt:"選項名",val:"選項值"}

　　那么一個選項組則是：

　　Code:

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

其中“父選項值”是父下拉列表選中的值。

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

2.根據傳入的數組創建選項列表：

　　Code:

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

3.在設置選項之前，我們需要先將原有選項清空：

　　Code:

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

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

4.設置一個提示選擇項和默認選擇項：

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

　　另外，下拉列表也需要能夠設置默認選擇項，即在頁面加載的時候，設置選中狀態的項目。

　　完整代碼如下：

　　Javascript:

<scriptlanguagescriptlanguage="JavaScript"
type="text/javascript"> 
<!--　  
/**說明：將指定下拉列表的選項值清空　  
*作者：CodeBit.cn(http://www.CodeBit.cn)　*　  
*@param{String||Object]}selectObj目標下拉選框的名稱或對象，必須　  
*/  
functionremoveOptions(selectObj){　　  
if(typeofselectObj!='object'){　　　　  
selectObj=document.getElementById(selectObj);}　//原有選項計數　　  
varlen=selectObj.options.length;　　　  
for(vari=0;i<len;i++)　　{　　　　  
//移除當前選項　　　　  
selectObj.options[0]=null;　　  
}}  
/**說明：設置傳入的選項值到指定的下拉列表中　  
*作者：CodeBit.cn(http://www.CodeBit.cn)　*　  
*@param{String||Object]}selectObj目標下拉選框的名稱或對象，必須　  
*@param{Array}optionList選項值設置格式：[{txt:'北京',val:'010'},  
*{txt:'上海',val:'020'}]，必須  
*@param{String}firstOption***個選項值，如：“請選擇”，可選，值為空  
*@param{String}selected默認選中值，可選　  
*/  
functionsetSelectOption(selectObj,optionList,
firstOption,selected){　　  
if(typeofselectObj!='object'){　　　　  
selectObj=document.getElementById(selectObj);　　  
}　　　//清空選項　　  
removeOptions(selectObj);　　　//選項計數　　  
varstart=0;　　　　　//如果需要添加***個選項　　  
if(firstOption){　　　　  
selectObj.options[0]=newOption(firstOption,'');
　　//選項計數從1開始　　　　  
start++;　　  
}　　　  
varlen=optionList.length;　　　  
for(vari=0;i<len;i++){　　　　  
//設置option　　　　  
selectObj.options[start]=newOption(optionList[i].txt,
optionList[i].val);　　　　　  
//選中項　　　　  
if(selected==optionList[i].val){　　　　　　  
selectObj.options[start].selected=true;　　　　  
}　　　　　  
//計數加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:'揚州',val:'揚州'},　　　　  
{txt:'鎮江',val:'鎮江'},　　　　  
{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> 
市

　　根據這個結構，設置好數據，我們可以很容易的實現無限級聯動菜單。或者我們也可以將數據存放在文件或數據庫中，通過Ajax獲取數據。

【編輯推薦】

JavaScript對象的定義及創建實例
常用JavaScript內部對象
JavaScript中圖像處理技巧
JavaScript函數中arguments對象
Javascript中CSS屬性float特殊寫法

責任編輯：佚名來源： tech.ddvip.com

聯動菜單 JavaScript