Jquery三级联动-成都创新互联网站建设

成都创新互联网站制作

028-86922220

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

Jquery三级联动

  1.  
  2.         $(function(){  
  3.             linkage.init('state','country','city');  
  4.             linkage.init('state1','country1','city1');  
  5.         });  
  6.      
  7.    
  8.     
  9.    
  10.     出发地:  
  11.        
  12.        
  13.      
  14.     
     
  15.     到达地:  
  16.        
  17.        
  18.      
  19.    


 

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

 

  1. function linkage(){}  
  2.  
  3. $(function(){  
  4.     //linkage.init("state","country","city"); 
  5. });  
  6.  
  7.  
  8. linkage.init = function(levelOne, levelTwo, levelThree){  
  9.  
  10.     linkage.data = [];  
  11.  
  12.     levelOne = "#" + levelOne;  
  13.     levelTwo = "#" + levelTwo;  
  14.     levelThree = "#" + levelThree;  
  15.     var html = "";  
  16.     var url = "linkage.action";//访问地址 
  17.       
  18.     //JQuery访问数据 
  19.     $.getJSON(url, function(data){  
  20.         linkage.data = data;  
  21.           
  22.         $(levelOne).html(linkage.getOptionHtmlByLevel(1));//洲区域信息 
  23.         $(levelTwo).html(linkage.getOptionHtmlById($(levelOne).val()));//国家信息 
  24.         $(levelThree).html(linkage.getOptionHtmlById($(levelTwo).val()));//城市信息 
  25.           
  26.         // 为下拉levelOne框绑定onchange事件 
  27.         $(levelOne).change(function(){  
  28.             $(levelTwo).html(linkage.getOptionHtmlById($(levelOne).val()));//国家信息 
  29.             $(levelThree).html(linkage.getOptionHtmlById($(levelTwo).val()));//城市信息 
  30.         });  
  31.         // 为下拉levelTwo框绑定onchange事件 
  32.         $(levelTwo).change(function(){  
  33.             $(levelThree).html(linkage.getOptionHtmlById($(levelTwo).val()));//城市信息 
  34.         });  
  35.           
  36.     });  
  37. };  
  38.  
  39. /** 
  40.  * 获得下拉框的选项html 
  41.  * @param data  
  42.  * @return html 
  43.  */ 
  44. linkage.getOptionHtml = function(data){  
  45.     var html = "";  
  46.       
  47.     html = "" + data.locationName + "";  
  48.       
  49.     return html;  
  50. };  
  51.  
  52. /** 
  53.  * 根据副ID查找数据 
  54.  * @param subId  
  55.  * @return html 
  56.  */ 
  57. linkage.getOptionHtmlById = function(subId){  
  58.     var html = "";  
  59.     for(i = 0 ; i < linkage.data.length ; i++){  
  60.         if(linkage.data[i].subId == subId){  
  61.             html += linkage.getOptionHtml(linkage.data[i]);  
  62.         }  
  63.     }  
  64.       
  65.     return html;  
  66. };  
  67.  
  68. /** 
  69.  * 根据区域级别查找数据 
  70.  * @param level 
  71.  * @return html 
  72.  */ 
  73. linkage.getOptionHtmlByLevel = function(level){  
  74.     var html = "";  
  75.       
  76.     for(i = 0 ; i < linkage.data.length ; i++){  
  77.         if(linkage.data[i].locationLevel == level){  
  78.             html += linkage.getOptionHtml(linkage.data[i]);  
  79.         }  
  80.     }  
  81.       
  82.     return html;  
  83. }; 

 

  1. public void getAllLocationInfo(){  
  2.           
  3.         List locationList = this.linkageService.findAllLocation();  
  4.           
  5.           
  6.           
  7.         HttpServletResponse response = (HttpServletResponse)ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE);  
  8.         HttpServletRequest request = (HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);  
  9.         try {  
  10.               
  11.             request.setCharacterEncoding("utf-8");  
  12.             response.setCharacterEncoding("utf-8");  
  13.             JSONArray json = JSONArray.fromObject(locationList);  
  14.             response.getWriter().write(json.toString());  
  15.         } catch (IOException e) {  
  16.             // TODO Auto-generated catch block 
  17.             e.printStackTrace();  
  18.         }  
  19.     } 


 

注意：此用到了JSON转换包

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


分享文章：Jquery三级联动
转载来于：http://kswsj.cn/article/ipdjih.html

其他资讯