SoFunction
Updated on 2025-04-10

Simple and compact multi-stage linkage menu implemented with prototype

Using this js library, you can find it by searching the Internet. It is an open source js function library.
I saw several posts on the linkage menu today
This should be a good code for everyone
I'll also post a smaller code that we use in our team.

// author: downpour   
var DoubleCombo = ();   
 = {   
  initialize: function(source, target, ignore, url, options, excute) {   
     = $(source);   
     = $(target);   
     = $A(ignore);   
     = url;   
     = $H(options);   
     = (this);   
    if(excute) {   
        ();   
    }   
  },   
  doChange: function() {   
    if( != '') {   
        // first clear the ignore ones   
        (   
            function(value) {   
                $(value). = 1;   
                $(value).options[0].selected = 'selected';   
            }   
        );   
        // create parameter for ajax   
        var query = $H({ id:  });   
        var parameters = {   
            method: 'post',    
            parameters: $H().merge(query).toQueryString(),    
            onComplete: (this)   
        }   
        var locationRequest = new ( , parameters );   
    }   
  },   
  getResponse: function(request) {   
     = 1;   
    [0].selected = 'selected';   
    var response = $A(().split(';'));   
    --;   
    for(var i = 0; i < ; i++) {   
        var optionParam = response[i].split(',');   
        [] = new Option(optionParam[1], optionParam[0]);   
    }   
  }   
}  
Let me briefly talk about a few parameters:
source First level menu
target linkage menu
ignore When sometimes 3 levels are linked, such as state, province, city, etc. If there is no province in Shanghai, the level 3 menu can be ignored
url action url
options action parameters
execute Whether it is linked
Take a relatively common example and look at the three-level linkage of the country, province, and city as an example
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="/?combo=true"></c:url>', {});   
<script type="text/javascript">  
    new DoubleCombo('province', 'city', null, '<c:url value="/?combo=true"></c:url>', {});