技术教程 编程教程 Jquery 三级联动 正文

Jquery 三级联动

2023-06-15,,

 

  1. <script type="text/javascript"> 
  2.         $(function(){  
  3.             linkage.init('state','country','city');  
  4.             linkage.init('state1','country1','city1');  
  5.         });  
  6.     </script> 
  7.   </head> 
  8.     
  9.   <body > 
  10.     出发地:  
  11.     <select id="state"></select>&nbsp;  
  12.     <select id="country"></select>&nbsp;  
  13.     <select id="city"></select> 
  14.     <br> 
  15.     到达地:  
  16.     <select id="state1"></select>&nbsp;  
  17.     <select id="country1"></select>&nbsp;  
  18.     <select id="city1"></select> 
  19.   </body> 

 

 

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

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!