js實現省級聯動(資料結構優化)
阿新 • • 發佈:2020-07-19
本文例項為大家分享了js實現省級聯動的具體程式碼,供大家參考,具體內容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Document</title> <style> div{ width: 200px; float: left; margin-left: 20px; } select{ width: 200px; } </style> </head> <body> <div> <select id="province" name="province"> <option value="">---請選擇省---</option> </select> </div> <div> <select id="city" name="city"> <option value="">---請選擇城市---</option> </select> </div> </body> <script> //準備資料--- let data = [ { p_name:"浙江省",p_id:1,citys:[ { c_name:"杭州市",c_id:100 },{ c_name:"溫州市",c_id:101 },{ c_name:"寧波市",c_id:102 },{ c_name:"嘉興市",c_id:103 },{ c_name:"湖州市",c_id:104 },{ c_name:"紹興市",c_id:105 },{ c_name:"金華市",c_id:106 },] },{ p_name:"湖北省",p_id:2,citys:[ { c_name:"武漢市",c_id:200 },{ c_name:"黃石市",c_id:201 },{ c_name:"十堰市",c_id:202 },{ c_name:"襄陽市",c_id:204 },{ c_name:"荊州市",c_id:205 },{ c_name:"黃岡市",c_id:206 },{ p_name:"山東省",p_id:3,citys:[ { c_name:"濟南市",c_id:300 },{ c_name:"青島市",c_id:301 },{ c_name:"淄博市",c_id:302 },{ c_name:"棗莊市",c_id:303 },{ c_name:"煙臺市",c_id:304 },{ c_name:"日照市",c_id:305 },] } ]; // 載入所有的省份資訊到一級的下拉列表中 let province = document.getElementById("province"); data.forEach((e,i)=>{ province.innerHTML += '<option value="'+e.p_id+'">'+e.p_name+'</option>' }); //給一級下拉列表繫結onchange事件 province.onchange = function(){ // this.value;//選擇的省的id // alert(this.value); //根據省的id去找該省對應的市的資訊 data.forEach((e,i)=>{ if(e.p_id == this.value){ let citys = e.citys; //將所有的市的資訊填充到二級的下拉列表 let city = document.getElementById("city"); //把之前的所有選項清掉 city.innerHTML = '<option value="">---請選擇城市---</option>' citys.forEach((ele,idx)=>{ //ele.c_name;//市的名稱 // ele.c_id;//市的id city.innerHTML += '<option value="'+ele.c_id+'">'+ele.c_name+'</option>' }); } }); } </script> </html>
具體實現如下,發現城市資料存的很深,要通過省來查詢城市會比較麻煩,而且迴圈遍歷的是指數級的佔記憶體,通過下面資料結構的優化,相對而言,查詢會更容易
實現大概的思路是通過map集合,key找value的思路
存入的時候省,單獨放。城市的key等於省的p_id,因為有了標識,這樣就很容易相互查詢了
//準備資料--- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>快速入門</title> </head> <body> <div> <select id="province" name="province"> <option value="">---請選擇省---</option> </select> </div> <div> <select id="city" name="city" > <option value="">---請選擇城市---</option> </select> </div> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> let data = [ { p_name:"浙江省",},]; let city={1:[ { c_name:"杭州市",],2:[ { c_name:"武漢市",] } data.forEach((e,i)=>{ $("#province").append('<option value="'+e.p_id+'">'+e.p_name+'</option>') }) $("#province").change(function(){ $("#city").empty(); let num= this.value; city[num].forEach((e,i)=>{ $("#city").append('<option value="'+e.c_id+'">'+e.c_name+'</option>') }) }) </script> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。