解析JS实现无刷新联动菜单技巧-js级联菜单

本文向大家简单介绍一下什么是联动菜单，以及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获取数据。

【编辑推荐】