【javaweb】JQ實現省市聯動
阿新 • • 發佈：2018-12-10
需求：比如在註冊頁面中，需要選擇籍貫，當我們選擇省的時候，市可以隨著省的選擇不同而變動。
步驟分析：1. 匯入JQ的檔案
2. 文件載入事件:頁面初始化
3. 進一步確定事件: change事件
4. 函式: 得到當前選中省份
5. 得到城市, 遍歷城市資料
6. 將遍歷出來的城市新增到城市的select中
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <script> /* 準備工作 : 準備資料 */ var provinces = [ ["深圳市","東莞市","惠州市","廣州市"], ["長沙市","岳陽市","株洲市","湘潭市"], ["廈門市","福州市","漳州市","泉州市"] ]; $(function(){ $("#province").change(function(){ // alert(this.value); //得到城市資訊 var cities = provinces[this.value]; //清空城市select中的option /*var $city = $("#city"); //將JQ物件轉成JS物件 var citySelect = $city.get(0) citySelect.options.length = 0;*/ $("#city").empty(); //採用JQ的方式清空 //遍歷城市資料 $(cities).each(function(i,n){ $("#city").append("<option>"+n+"</option>"); }); }); }); </script> </head> <body> <!--選擇省份--> <select id="province"> <option value="-1">--請選擇--</option> <option value="0">廣東省</option> <option value="1">湖南省</option> <option value="2">福建省</option> </select> <!--選擇城市--> <select id="city"> </select> </body> </html>