省市區三級聯動

前端實現省市區三級聯動的方法有不少，我就用我認爲最簡單的方式進行實現。爲了選取和操做dom方便我引入了jquery.html

html代碼：前端

<div>
            <select name="" id="pro">//省
                <!--<option value=""></option>-->
            </select>
            <select name="" id="city">//市
                <!--<option value=""></option>-->
            </select>
            <select name="" id="area">//區
                <!--<option value=""></option>-->
            </select>
          </div>

數據三個數組，分別表明省，市，區，這個數據能夠是後臺從數據庫讀出來的數據，也能夠是在JS裏直接寫的數據。但不管是哪一種形式，三個數組的數據都是有關聯的。arr_c，市數組，裏面每一項內容都有一個屬性‘pid’，表示這個市是屬於哪一個省的，即pid對應的是省數組裏的id。一樣arr_a，區數組，裏面的cid是對應市數組裏的id，表示這個區是屬於哪一個市的。jquery

let arr_p = [ {id:"0","text":"請選擇省份"}, {id:"1","text":"北京"}, {id:"2","text":"上海"}, {id:"3","text":"安徽"}, {id:"4","text":"浙江"}, {id:"5","text":"江蘇"} ] let arr_c = [ {id:"0",pid:"0","text":"請選擇城市"}, {id:"1",pid:"1","text":"北京1"}, {id:"2",pid:"1","text":"北京2"}, {id:"3",pid:"1","text":"北京3"}, {id:"4",pid:"1","text":"北京4"}, {id:"5",pid:"2","text":"上海1"}, {id:"6",pid:"2","text":"上海2"}, {id:"7",pid:"2","text":"上海3"}, {id:"8",pid:"3","text":"安徽1"}, {id:"9",pid:"3","text":"安徽2"}, {id:"10",pid:"4","text":"浙江1"}, {id:"11",pid:"4","text":"浙江2"}, {id:"12",pid:"4","text":"浙江3"} ] let arr_a = [ {id:"0",cid:"0","text":"請選擇地區"}, {id:"1",cid:"1","text":"北京1區"}, {id:"2",cid:"1","text":"北京1區"}, {id:"3",cid:"1","text":"北京1區"}, {id:"4",cid:"2","text":"北京2區"}, {id:"5",cid:"2","text":"北京2區"}, {id:"6",cid:"3","text":"北京3區"}, {id:"7",cid:"3","text":"北京3區"}, {id:"8",cid:"4","text":"北京4區"}, {id:"9",cid:"4","text":"北京4區"}, {id:"10",cid:"4","text":"北京4區"}, {id:"11",cid:"5","text":"上海1區"}, {id:"12",cid:"5","text":"上海1區"}, {id:"13",cid:"5","text":"上海1區"}, {id:"14",cid:"6","text":"上海2區"}, {id:"15",cid:"6","text":"上海2區"}, {id:"16",cid:"6","text":"上海2區"}, {id:"17",cid:"7","text":"上海3區"}, {id:"18",cid:"7","text":"上海3區"}, {id:"19",cid:"7","text":"上海3區"}, {id:"20",cid:"7","text":"上海3區"}, {id:"21",cid:"8","text":"安徽1區"}, {id:"22",cid:"8","text":"安徽1區"}, {id:"23",cid:"8","text":"安徽1區"}, {id:"24",cid:"8","text":"安徽1區"}, {id:"26",cid:"9","text":"安徽2區"}, {id:"27",cid:"9","text":"安徽2區"}, {id:"28",cid:"9","text":"安徽2區"}, {id:"29",cid:"9","text":"安徽2區"}, {id:"30",cid:"10","text":"安徽3區"}, {id:"31",cid:"10","text":"安徽3區"}, {id:"32",cid:"10","text":"安徽3區"}, {id:"33",cid:"10","text":"安徽3區"}, {id:"34",cid:"11","text":"浙江1區"}, {id:"35",cid:"11","text":"浙江1區"}, {id:"36",cid:"12","text":"浙江2區"}, {id:"37",cid:"12","text":"浙江2區"}, {id:"38",cid:"12","text":"浙江2區"}, {id:"39",cid:"13","text":"浙江3區"}, {id:"40",cid:"13","text":"浙江3區"}, {id:"41",cid:"13","text":"浙江3區"} ]

接着添加一個方法selPro，該方法循環arr_p數組（省數據），爲第一個下拉框添加選項。數據庫

function selPro(){ let len = arr_p.length; let p = $("#pro") for(var i=0;i<len;i++){ var option =`<option value=${arr_p[i].id}>${arr_p[i].text}</option>` p.append(option) } }

而後添加方法selCity，該方法和selPro相似，循環爲第二個下拉框添加選項，主要的區別就是隻添加某個省的市數據，添加哪一個省的市數據，取決於第一個下拉框選的是哪一個省，就是經過參數傳過來的省id。代碼以下。數組

function selCity(pid){ let len = arr_c.length; let c = $("#city") c.empty() for(var i=0;i<len;i++){ if(arr_c[i].pid==pid){ let option = `<option value=${arr_c[i].id}>${arr_c[i].text}</option>` c.append(option) } } }

最後添加的方法是selArea，和selCity方法同樣，生成區下拉框，用哪一個市的區取決於第二個下拉框選的數據。代碼以下app

function selArea(cid){ let len = arr_a.length; let a = $("#area"); a.empty() for(var i=0;i<len;i++){ if(arr_a[i].cid==cid){ let option = `<option value=${arr_a[i].id}>${arr_a[i].text}</option>` a.append(option) } } }

而後爲第一個下拉框添加change事件，就是當第一個下拉框選擇不一樣的省時，須要用該省下的市數據填充到第二個下拉框裏。dom

同理要爲第二個下拉框添加change事件，當第二個下拉框選擇不一樣的市時，須要用該市下的區數據填充到第三個下拉框裏。this

代碼如圖。url

$(function(){ selPro();//對三個下拉框進行加載 selCity(0); selArea(0);
 $("#pro").change(function(){ let pid=$(this).val(); selCity(pid); let cid = $("#city").val(); selArea(cid) }) $("#city").change(function(){ let cid = $(this).val(); selArea(cid) }) })

效果以下：spa

實現的方式有不少，推薦幾個比較好的：

https://www.cnblogs.com/maderlzp/p/7687161.html

http://blog.csdn.net/ghjzzhg/article/details/73607565