Jquery 三级联动

发布时间：2020-05-27 15:25:58 作者：zhangminonly
来源：网络阅读：1799

<script type="text/javascript"> 
        $(function(){  
            linkage.init('state','country','city');  
            linkage.init('state1','country1','city1');  
        });  
    </script> 
  </head> 
    
  <body > 
    出发地:  
    <select id="state"></select>&nbsp;  
    <select id="country"></select>&nbsp;  
    <select id="city"></select> 
    <br> 
    到达地:  
    <select id="state1"></select>&nbsp;  
    <select id="country1"></select>&nbsp;  
    <select id="city1"></select> 
  </body>

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 = "<option value="+data.id+">" + data.locationName + "</option>";  
      
    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<LocationBean> 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 三级联动

相关阅读