使用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实现的简单小巧的多级联动菜单】相关文章：
★ Javascript中prototype属性实现给内置对象添加新的方法
★ Javascript实现的SHA-256加密算法完整实例