Using prototype. js, a js library, which can be found on the Internet, is an open-source js function library.
I have posted several posts on the linkage menu today.
Everyone should have their own good code.
I also posted a relatively small code in our team.
// Author: downpour
Var DoubleCombo = Class. create ();
DoubleCombo. prototype = {
Initialize: function (source, target, ignore, url, options, excute ){
This. source = $ (source );
This.tar get =$ (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.tar get. options. length = 1;
This.tar get. 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.tar get. options. length] = new Option (optionParam [1], optionParam [0]);
}
}
}
Let's briefly talk about several parameters:
Source Level 1 menu
Target linkage menu
When ignore is associated at level 3, for example, a country, province, city, or city without province in Shanghai, you can ignore the menu at level 3rd.
Url action url
Options action Parameter
Is excute linked?
Take a common example to see how the national provincial-municipal level 3 linkage works.
Code
<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 ('vince ', 'city', null,' <c: url value = "/xxxx. do? Combo = true "> </c: url> ',{});