用prototype实现的简单小巧的多级联动菜单

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

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

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

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

　　// author: downpour

　　var DoubleCombo = 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 != '') {

　　// first clear the ignore ones

　　this.ignore.each(

　　function(value) {

　　$(value).options.length = 1;

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

　　}

　　);

　　// create parameter for ajax

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

　　var parameters = {

　　method: 'post',

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

　　onComplete: this.getResponse.bindAsEventListener(this)

　　}

　　var locationRequest = new Ajax.Request( this.url, parameters );

　　}

　　},

　　getResponse: function(request) {

　　this.target.options.length = 1;

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

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

　　response.length--;

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

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

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

　　}

　　}

　　}

　　简单说一下几个参数吧：

　　source 第一级菜单

　　target 联动菜单

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

　　url action url

　　options action参数

　　excute 是否联动

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

　　代码

　　<html-el:select property="country" styleId="country" >

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

　　</html-el:select>

　　<html-el:select property="province" styleId="province">

　　<option value="">--Please Select--</option>

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

　　</html-el:select>

　　<html-el:select property="city" styleId="city">

　　<option value="">--Please Select--</option>

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

　　</html-el:select>

　　<script type="text/javascript">

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

　　<script type="text/javascript">

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