使用prototype.js这个js库,这个在网上一搜就能找到了，是一个开源的js函数库。

看到今天贴了几个联动菜单的帖子

这个应该大家都有各自比较好的代码了

我也顺手贴一个我们team里面用的比较小巧的代码

//author:downpour

varDoubleCombo=Class.create();

DoubleCombo.prototype={

initialize:function(source,target,ignore,url,options,excute){

this.source=$(source);

this.target=$(target);

this.ignore=$A(ignore);

this.url=url;

this.options=$H(options);

this.source.onchange=this.doChange.bindAsEventListener(this);

if(excute){

this.doChange();

}

},

doChange:function(){

if(this.source.value!=''){

//firstcleartheignoreones

this.ignore.each(

function(value){

$(value).options.length=1;

$(value).options[0].selected='selected';

}

);

//createparameterforajax

varquery=$H({id:this.source.value});

varparameters={

method:'post',

parameters:$H(this.options).merge(query).toQueryString(),

onComplete:this.getResponse.bindAsEventListener(this)

}

varlocationRequest=newAjax.Request(this.url,parameters);

}

},

getResponse:function(request){

this.target.options.length=1;

this.target.options[0].selected='selected';

varresponse=$A(request.responseText.trim().split(';'));

response.length--;

for(vari=0;i<response.length;i++){

varoptionParam=response[i].split(',');

this.target.options[this.target.options.length]=newOption(optionParam[1],optionParam[0]);

}

}

}

简单说一下几个参数吧：

source第一级菜单

target联动菜单

ignore当有时候3级联动时，例如国家省市例如上海没有省的，可以忽略第3级菜单

urlactionurl

optionsaction参数

excute是否联动

拿比较常见的例子来看国家省市3级联动来作为例子

代码

<html-el:selectproperty="country"styleId="country">

<html-el:optionscollection="countries"property="id"labelProperty="name"/>

</html-el:select>

<html-el:selectproperty="province"styleId="province">

<optionvalue="">--PleaseSelect--</option>

................

</html-el:select>

<html-el:selectproperty="city"styleId="city">

<optionvalue="">--PleaseSelect--</option>

................

</html-el:select>

<scripttype="text/javascript">

newDoubleCombo('country','province',null,'<c:urlvalue="/xxxx.do?combo=true"></c:url>',{});

<scripttype="text/javascript">

newDoubleCombo('province','city',null,'<c:urlvalue="/xxxx.do?combo=true"></c:url>',{});

【用prototype实现的简单小巧的多级联动菜单】相关文章：

★ jQuery使用zTree插件实现树形菜单和异步加载

★ jQuery插件实现适用于移动端的地址选择器

★ js实现精美的银灰色竖排折叠菜单

★ Javascript中prototype属性实现给内置对象添加新的方法

★ jQuery+ajax实现无刷新级联菜单示例

★ 基于JavaScript实现智能右键菜单

★ javascript实现在网页任意处点左键弹出隐藏菜单的方法

★ JS实现简单路由器功能的方法

★ jQuery实现给页面换肤的方法

★ 如何实现浏览器上的右键菜单