|
|
看到今天貼了幾個(gè)聯(lián)動(dòng)菜單的帖子
這個(gè)應(yīng)該大家都有各自比較好的代碼了
我也順手貼一個(gè)我們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]);
}
}
}
簡(jiǎn)單說(shuō)一下幾個(gè)參數(shù)吧：
source 第一級(jí)菜單
target 聯(lián)動(dòng)菜單
ignore 當(dāng)有時(shí)候3級(jí)聯(lián)動(dòng)時(shí)，例如 國(guó)家 省 市 例如上海沒(méi)有省的，可以忽略第3級(jí)菜單
url action url
options action參數(shù)
excute 是否聯(lián)動(dòng)
拿比較常見(jiàn)的例子來(lái)看 國(guó)家 省 市 3級(jí)聯(lián)動(dòng)來(lái)作為例子
代碼
<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>', {});
JavaScript技術(shù)：用prototype實(shí)現(xiàn)的簡(jiǎn)單小巧的多級(jí)聯(lián)動(dòng)菜單，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
