一、實現目的：
如標題所述，通過JS來實現地址的選取，上一篇博客介紹的方式是通過java讀取txt資源文件來實現地址的選擇，通過ajax方式訪問服務器實現省市區聯動。此篇中將介紹如何使用JS實現相同功能。
相比上一篇的那種方式，這種方式在選擇地址的時候不用跟服務器交互，效率更高些。
二、資源文件
要實現地址選取當然也需要存放着區域的資源文件。相關JS文件(region_select.js)的下載地址(網盤)：https://yunpan.cn/cqLRBjRw45EzZ 提取碼：bb2a
三、代碼實現
1. 前台頁面；在JSP上使用簡單html標簽，然后引入相關資源文件即可。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>中國行政區域聯動選擇</title> 6 </head> 7 <style> 8 .areainput1{width: auto; margin-right: 5px;} 9 body div{margin-top: 10px;margin-left: 5px;} 10 </style> 11 <body> 12 <form action="save.action" method="post"> 13 <div id="div_province"> 14 <select name="add_p" id="add_p" class="areainput" value="" ></select> 15 <select name="add_c" id="add_c" class="areainput" value="" ></select> 16 <select name="add_a" id="add_a" class="areainput" value=""></select> 17 </div> 18 <div><input type="submit" value="提交"/></div> 19 </form> 20 21 <script charset="utf-8" src="js/region_select.js"></script> 22 <script type="text/javascript"> 23 new PCAS('add_p','add_c','add_a' ,'天津市','天津市','河東區'); //這是初始化 24 //如果數據庫里已經存了某個地址，PCAS方法的后面三個參數可以用JSTL標簽輸出即可 25 </script> 26 </body> 27 </html>
頁面效果如下圖所示：
2. 后台Action接收參數(以使用了strut2框架為例)
1 public class ThirdpartyConfigAction extends BaseAction{ 2 private String add_p; 3 private String add_c; 4 private String add_a; 5 6 /* 7 * get/set方法此處省略... 8 */ 9 10 //當頁面提交后，strut會自動將成員變量復制，頁面上選中的省、市、區就會存到對應變量里面 11 public String save(){ 12 13 //調用DAO方法，保存數據 14 } 15 }
三、總結
這種實現方式就特別簡單，具體JS是怎么實現的可以不用管它，學會使用即可，有時間和興趣可以自己研究，此為實際工作中使用到的，為方便以后項目中再次用到故記錄下來，以便以后查閱。
other:
這里推薦一個編輯器HBuilder，寫html/jsp很方便，樣式JS方法都有提示，挺好用的。