Json 基於jQuery JSON的省市聯動效果

json

ajax

省市聯動

省市區聯動下拉效果在web中應用非常廣泛，尤其在一些會員資訊系統、電商**最為常見。開發者一般使用ajax實現無重新整理下拉聯動。本文將講述，利用jquery外掛程式，通過讀取json資料，實現無重新整理動態下拉省市二（三）級聯動效果。

檢視演示

html

首先在head中載入jquery庫和cityselect外掛程式。

接下來，我們在#city中，放置三個select，並且三個select分別設定class屬性為：prov、city、dist，分別表示省、市、區（縣）三個下拉框。注意如果只想實現省市二級聯動，則去掉第三個dist的select即可。

id="city"> 
class="prov">
class="city" disabled="disabled">
class="dist" disabled="disabled">

jquery

呼叫cityselect外掛程式非常簡單，直接呼叫：

$("#city").cityselect();

自定義引數呼叫，設定預設省市區。

$("#city").cityselect();

當然，你還可以擴充套件，自定義下拉列表選項資料，你可以根據需要設定下拉內容，注意資料格式一定要為json格式。

$("#city").cityselect(,,]}, 
]}, 
,,,]}, 
,,]}, 
]}, 
prov:"", 
city:"", 
dist:"", 
nodata:"none" 
});

你還可以利用php等後台語言將資料庫中的資料轉換成json格式，然後使用url引數指向後台位址也能實現無重新整理聯動效果。

$("#city").cityselect();