jQuery實現省市縣三級聯動選單
阿新 • • 發佈：2018-12-31
使用JQuery實現的全國省市縣三級聯動選單，沒有使用ajax，資料也不是從資料庫中動態讀取出來的，就是簡單的jquery，方便實用，實現效果如下圖：
1、定義資料，我們可以將省、市、縣定義為一個js檔案中，分別為三個陣列存放，下面是舉例，所以只列出部分省、市、縣，全國和海外全部資料見我的資原始檔:省市縣三級聯動選單完整專案中的
我們定義一個js檔案，用來存放省市縣資料:provincesdata.js
//定義省級資料,為一維陣列 var GP =['安徽','澳門','北京'] //定義市級資料，為二維陣列 var GT = [ ['合肥','安慶','蚌埠','亳州','巢湖','池州','滁州','阜陽','淮北','淮南','黃山','六安','馬鞍山','宿州','銅陵','蕪湖','宣城'], ['澳門'], ['昌平','朝陽','崇文','大興','東城','房山','豐臺','海淀','懷柔','門頭溝','密雲','平谷','石景山','順義','通州','西城','宣武','延慶'] ] //定義縣級資料，為三維陣列 var GC = [ [ ['長豐','肥東','肥西','合肥市'], ['安慶市','樅陽','懷寧','潛山','宿松','太湖','桐城','望江','嶽西'], ['蚌埠市','固鎮','懷遠','五河'], ['亳州市','利辛','蒙城','渦陽'], ['巢湖市','含山','和縣','廬江','無為'], ['池州市','東至','青陽','石臺'], ['滁州市','定遠','鳳陽','來安','明光','全椒','天長'], ['阜南','阜陽市','界首','臨泉','太和','潁上'], ['淮北市','濉溪'], ['鳳台','淮南市'], ['黃山市','祁門','歙縣','休寧','黟縣'], ['霍邱','霍山','金寨','六安市','壽縣','舒城'], ['當塗','馬鞍山市'], ['碭山','靈璧','泗縣','宿州市','蕭縣'], ['銅陵市','銅陵縣'], ['繁昌','南陵','蕪湖市','蕪湖縣'], ['廣德','績溪','涇縣','旌德','郎溪','寧國','宣城市'] ], [ ['澳門'] ], [ ['昌平'], ['朝陽'], ['崇文'], ['大興'], ['東城'], ['房山'], ['豐臺'], ['海淀'], ['懷柔'], ['門頭溝'], ['密雲'], ['平谷'], ['石景山'], ['順義'], ['通州'], ['西城'], ['宣武'], ['延慶'] ] ]
2、編寫jquery城市聯動外掛：jquery.ProvinceCity.js檔案
$.fn.ProvinceCity = function(){ var _self = this; //定義3個預設值 _self.data("province",["請選擇", "請選擇"]); _self.data("city1",["請選擇", "請選擇"]); _self.data("city2",["請選擇", "請選擇"]); //插入3個空的下拉框 _self.append("<select></select>"); _self.append("<select></select>"); _self.append("<select></select>"); //分別獲取3個下拉框 var $sel1 = _self.find("select").eq(0); var $sel2 = _self.find("select").eq(1); var $sel3 = _self.find("select").eq(2); //預設省級下拉 if(_self.data("province")){ $sel1.append("<option value='"+_self.data("province")[1]+"'>"+_self.data("province")[0]+"</option>"); } $.each( GP , function(index,data){ $sel1.append("<option value='"+data+"'>"+data+"</option>"); }); //預設的1級城市下拉 if(_self.data("city1")){ $sel2.append("<option value='"+_self.data("city1")[1]+"'>"+_self.data("city1")[0]+"</option>"); } //預設的2級城市下拉 if(_self.data("city2")){ $sel3.append("<option value='"+_self.data("city2")[1]+"'>"+_self.data("city2")[0]+"</option>"); } //省級聯動 控制 var index1 = "" ; $sel1.change(function(){ //清空其它2個下拉框 $sel2[0].options.length=0; $sel3[0].options.length=0; index1 = this.selectedIndex; if(index1==0){ //當選擇的為 “請選擇” 時 if(_self.data("city1")){ $sel2.append("<option value='"+_self.data("city1")[1]+"'>"+_self.data("city1")[0]+"</option>"); } if(_self.data("city2")){ $sel3.append("<option value='"+_self.data("city2")[1]+"'>"+_self.data("city2")[0]+"</option>"); } }else{ $.each( GT[index1-1] , function(index,data){ $sel2.append("<option value='"+data+"'>"+data+"</option>"); }); $.each( GC[index1-1][0] , function(index,data){ $sel3.append("<option value='"+data+"'>"+data+"</option>"); }) } }).change(); //1級城市聯動 控制 var index2 = "" ; $sel2.change(function(){ $sel3[0].options.length=0; index2 = this.selectedIndex; $.each( GC[index1-1][index2] , function(index,data){ $sel3.append("<option value='"+data+"'>"+data+"</option>"); }) }); return _self; };
3、編寫我們的測試頁面，匯入我們的省市縣資料js：provincesdata.js和jquery聯動外掛js：jquery.ProvinceCity.js,還有一個很重要的jquery外掛：jquery-1.6.min.js,定義一個div檔案，引入我們的ProvinceCity方法即可：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <!--設定select樣式--> <style> #test select{ width:100px; margin-left:20px; } </style> <!--引入jquery外掛--> <script src="jquery-1.6.min.js" type="text/javascript"></script> <!--引入我們編寫的省市縣jquery外掛--> <script src="jquery.ProvinceCity.js" type="text/javascript"></script> <!--引入我們編寫的js省市縣基礎資料--> <script src="provincesdata.js" type="text/javascript"></script> <script> //呼叫外掛 $(function(){ $("#test").ProvinceCity(); }); </script> </head> <body> <div id="test"></div> </body> </html>
檢視html檔案，即可看到效果,當我們專案需要用到的時候，我們可以把下面幾個檔案當做外掛來使用，直接在專案中新增即可，如果需要相應的資料，在provincedata.js中進行相應的新增和修改即可，非常方便
<!--引入jquery外掛-->
<script src="jquery-1.6.min.js" type="text/javascript"></script>
<!--引入我們編寫的省市縣jquery外掛-->
<script src="jquery.ProvinceCity.js" type="text/javascript"></script>
<!--引入我們編寫的js省市縣基礎資料-->
<script src="provincesdata.js" type="text/javascript"></script>