溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Jquery 三級聯(lián)動(dòng)

發(fā)布時(shí)間：2020-05-27 15:25:58 來源：網(wǎng)絡(luò) 閱讀：1802 作者：zhangminonly 欄目：web開發(fā)

 

  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.     出發(fā)地:  
  11.     <select id="state"></select>&nbsp;  
  12.     <select id="country"></select>&nbsp;  
  13.     <select id="city"></select> 
  14.     <br> 
  15.     到達(dá)地:  
  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訪問數(shù)據(jù)  
  19.     $.getJSON(url, function(data){  
  20.         linkage.data = data;  
  21.           
  22.         $(levelOne).html(linkage.getOptionHtmlByLevel(1));//洲區(qū)域信息  
  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.  * 獲得下拉框的選項(xiàng)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.  * 根據(jù)副ID查找數(shù)據(jù)  
  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.  * 根據(jù)區(qū)域級別查找數(shù)據(jù)  
  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轉(zhuǎn)換包

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手