Jquery三级联动

 
        $(function(){  
            linkage.init('state','country','city');  
            linkage.init('state1','country1','city1');  
        });  
     
   
    
   
    出发地:  
       
       
     
    
 
    到达地:  
       
       
     
   

 

创新互联是一家专业提供饶河企业网站建设,专注与成都网站建设、网站设计、成都h5网站建设、小程序制作等业务。10年已为饶河众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

 

function linkage(){}  
 
$(function(){  
    //linkage.init("state","country","city"); 
});  
 
 
linkage.init = function(levelOne, levelTwo, levelThree){  
 
    linkage.data = [];  
 
    levelOne = "#" + levelOne;  
    levelTwo = "#" + levelTwo;  
    levelThree = "#" + levelThree;  
    var html = "";  
    var url = "linkage.action";//访问地址 
      
    //JQuery访问数据 
    $.getJSON(url, function(data){  
        linkage.data = data;  
          
        $(levelOne).html(linkage.getOptionHtmlByLevel(1));//洲区域信息 
        $(levelTwo).html(linkage.getOptionHtmlById($(levelOne).val()));//国家信息 
        $(levelThree).html(linkage.getOptionHtmlById($(levelTwo).val()));//城市信息 
          
        // 为下拉levelOne框绑定onchange事件 
        $(levelOne).change(function(){  
            $(levelTwo).html(linkage.getOptionHtmlById($(levelOne).val()));//国家信息 
            $(levelThree).html(linkage.getOptionHtmlById($(levelTwo).val()));//城市信息 
        });  
        // 为下拉levelTwo框绑定onchange事件 
        $(levelTwo).change(function(){  
            $(levelThree).html(linkage.getOptionHtmlById($(levelTwo).val()));//城市信息 
        });  
          
    });  
};  
 
/** 
 * 获得下拉框的选项html 
 * @param data  
 * @return html 
 */ 
linkage.getOptionHtml = function(data){  
    var html = "";  
      
    html = "" + data.locationName + "";  
      
    return html;  
};  
 
/** 
 * 根据副ID查找数据 
 * @param subId  
 * @return html 
 */ 
linkage.getOptionHtmlById = function(subId){  
    var html = "";  
    for(i = 0 ; i < linkage.data.length ; i++){  
        if(linkage.data[i].subId == subId){  
            html += linkage.getOptionHtml(linkage.data[i]);  
        }  
    }  
      
    return html;  
};  
 
/** 
 * 根据区域级别查找数据 
 * @param level 
 * @return html 
 */ 
linkage.getOptionHtmlByLevel = function(level){  
    var html = "";  
      
    for(i = 0 ; i < linkage.data.length ; i++){  
        if(linkage.data[i].locationLevel == level){  
            html += linkage.getOptionHtml(linkage.data[i]);  
        }  
    }  
      
    return html;  
}; 

 

public void getAllLocationInfo(){  
          
        List locationList = this.linkageService.findAllLocation();  
          
          
          
        HttpServletResponse response = (HttpServletResponse)ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE);  
        HttpServletRequest request = (HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);  
        try {  
              
            request.setCharacterEncoding("utf-8");  
            response.setCharacterEncoding("utf-8");  
            JSONArray json = JSONArray.fromObject(locationList);  
            response.getWriter().write(json.toString());  
        } catch (IOException e) {  
            // TODO Auto-generated catch block 
            e.printStackTrace();  
        }  
    } 

 

注意：此用到了JSON转换包

 jar包：json-lib-0.4.jar,commons-beanutils.jar

文章题目：Jquery三级联动
文章网址：http://bjjierui.cn/article/ipdjih.html