省市區聯動下拉效果在WEB中應用非常廣泛，尤其在一些會員信息系統、電商網站最為常見。開發者一般使用Ajax實現無刷新下拉聯動。本文將講述，利用jQuery插件，通過讀取JSON數據，實現無刷新動態下拉省市二（三）級聯動效果。
HTML
首先在head中載入jquery庫和cityselect插件。
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cityselect.js"></script>
接下來，我們在#city中，放置三個select，并且三個select分別設置class屬性為：prov、city、dist，分別表示省、市、區（縣）三個下拉框。注意如果只想實現省市二級聯動，則去掉第三個dist的select即可。
<div id="city"> <select class="prov"></select> <select class="city" disabled="disabled"></select> <select class="dist" disabled="disabled"></select> </div>
jQuery
調用cityselect插件非常簡單，直接調用：
$("#city").citySelect(); 自定義參數調用，設置默認省市區。
$("#city").citySelect({ url:"js/city.min.js", prov:"湖南", //省份 city:"長沙", //城市 dist:"岳麓區", //區縣 nodata:"none" //當子集無數據時，隱藏select }); 當然，你還可以擴展，自定義下拉列表選項數據，你可以根據需要設置下拉內容，注意數據格式一定要為JSON格式。
$("#city").citySelect({ url:{"citylist":[ {"p":"前端技術","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]}, {"n":"JAVASCIPT"}]}, {"p":"編程語言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]}, {"p":"數據庫","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]}, ]}, prov:"", city:"", dist:"", nodata:"none" }); 你還可以利用PHP等后臺語言將數據庫中的數據轉換成JSON格式，然后使用url參數指向后臺地址也能實現無刷新聯動效果。
$("#city").citySelect({ url:"data.php" }); 以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
