Jquery實現的省市區三級聯動
阿新 • • 發佈：2019-01-10
之前用javascript寫了個三級聯動，程式碼量較多，不夠優雅簡潔，這裡介紹一種jquery的寫法，大家可以做個比較。
還是先看效果吧。
下面是程式碼：
<body>
省份：<select id="province" ></select>
城市：<select id="city"></select>
區/縣<select id="area"></select>
<script type="text/javascript">
var provinceArr=["四川","重慶","雲南" 這裡的原理是利用 .append()方法向select選框下追加子節點,不需要判斷父節點是否被選中，也不需要重複的用巢狀for()來追加元素內容，從而達到精簡程式碼，減少邏輯呼叫的作用。
這邊文章到這裡其實已經可以結束了，但如果我們要自定義預設選中的城市呢。這個也簡單。
我們用三個變數來儲存我們的初始選擇：
var p=2;
var c=1;
var a=2;注意，在這裡進行第一次省（p）的判斷：
for(var i=0;i<provinceArr.length;i++){
/* 這裡進行了一個判斷，如果i的值與傳入的value值相等，則選中value值相等的那一項 */
if(p==i+1){
$("#province").append("<option value='"+(i+1)+"' selected='selected'>"+provinceArr[i]+"</option>");
}else{
$("#province").append("<option value='"+(i+1)+"'>"+provinceArr[i]+"</option>");
}
}同理，對城市（c）和區縣（a）進行判斷，選擇
//初始化城市
$("#city").append("<option value='0'>請選擇城市</option>");
for(var i=0;i<cityArr[p-1].length;i++){
if(c==i+1){
$("#city").append("<option value='"+(i+1)+"' selected='selected'>"+cityArr[p-1][i]+"</option>");
}else{
$("#city").append("<option value='"+(i+1)+"'>"+cityArr[p-1][i]+"</option>");
}
}
//初始化區域
$("#area").append("<option value='0' >請選擇區域 </option>");
for(var i=0;i<cityArr[p-1][c-1].length;i++){
if(a==i+1){
$("#area").append("<option value='"+(i+1)+"' selected='selected'>"+areaArr[p-1][c-1][i]+"</option>");
}else{
$("#area").append("<option value='"+(i+1)+"'>"+areaArr[p-1][c-1][i]+"</option>");
}
}其他地方不需改動，我們現在再來看看效果，根據p、c、a的值和數組裡對比，頁面應該預設選中
重慶—萬州—百安
網頁上是什麼呢
驗證自定義成功。
那這樣的修改有何意義呢。
當我們在某些網站填寫個人地址時，第一次是由我們自己選擇，這時系統已經把我操作的資料存入資料庫了。當我下次進行資料修改時，系統預設地址顯示的就是我上次存入的資料，原理就是我上面的操作（不過我目前道行不夠，還未進行資料庫操作~~）。
到此這篇文章正式結束啦~
謝謝各位大佬點選~~