JQuery中的省市聯動
阿新 • • 發佈：2018-11-26
需求分析:
在我們的登錄檔單中,通常我們需要知道使用者的籍貫,需要一個給用選擇的項,當用戶選中了省份之後,列出省下面所有的城市.
技術分析:
1. 準備工作 : 城市資訊的資料
2. 新增節點 : appendChild (JS)
1. append : 新增子元素到末尾
2. appendTo : 給自己找一個爹,將自己新增到別人家裡
3. prepend : 在子元素前面新增
4. after : 在自己的後面新增一個兄弟
3. 遍歷的操作:
步驟分析:
1. 匯入JQ的檔案
2. 文件載入事件:頁面初始化
3. 進一步確定事件: change事件
4. 函式: 得到當前選中省份
5. 得到城市, 遍歷城市資料
6. 將遍歷出來的城市新增到城市的select中
01JQuery中的省市聯動.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>03JQuery中的省市聯動</title> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <script> /* 準備工作 : 準備資料 */ var provinces = [ ["深圳市","東莞市","惠州市","廣州市"], ["長沙市","岳陽市","株洲市","湘潭市"], ["廈門市","福州市","漳州市","泉州市"] ]; /* 1. 匯入JQ的檔案 2. 文件載入事件:頁面初始化 3. 進一步確定事件: change事件 4. 函式: 得到當前選中省份 5. 得到城市, 遍歷城市資料 6. 將遍歷出來的城市新增到城市的select中 */ $(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;*/ //不加清空操作,會有小bug $("#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>