简单小巧的多级联动菜单
看到今天贴了几个联动菜单的帖子这个应该大家都有各自比较好的代码了
我也顺手贴一个我们team里面用的比较小巧的代码
// author: downpourvar 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 onesthis.ignore.each(function(value) {$(value).options.length = 1;$(value).options.selected = 'selected';});// create parameter for ajaxvar 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.selected = 'selected';var response = $A(request.responseText.trim().split(';'));response.length--;for(var i = 0; i < response.length; i++) {var optionParam = response.split(',');this.target.options = new Option(optionParam, optionParam);}}}
简单说一下几个参数吧：
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>', {});
页:
[1]