基于jQuery+JSON的省市二三級聯(lián)動效果

更新時間：2015年06月05日 10:53:31 投稿：hebedich

本文給大家分享的是利用jQuery插件，通過讀取JSON數(shù)據(jù)，實現(xiàn)無刷新動態(tài)下拉省市二（三）級聯(lián)動效果，十分的簡單實用，效果也非常棒，有需要的小伙伴可以參考下。

省市區(qū)聯(lián)動下拉效果在WEB中應用非常廣泛，尤其在一些會員信息系統(tǒng)、電商網(wǎng)站最為常見。開發(fā)者一般使用Ajax實現(xiàn)無刷新下拉聯(lián)動。本文將講述，利用jQuery插件，通過讀取JSON數(shù)據(jù)，實現(xiàn)無刷新動態(tài)下拉省市二（三）級聯(lián)動效果。

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，分別表示省、市、區(qū)（縣）三個下拉框。注意如果只想實現(xiàn)省市二級聯(lián)動，則去掉第三個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();

自定義參數(shù)調用，設置默認省市區(qū)。

 
$("#city").citySelect({ 
  url:"js/city.min.js", 
  prov:"湖南", //省份 
  city:"長沙", //城市 
  dist:"岳麓區(qū)", //區(qū)縣 
  nodata:"none" //當子集無數(shù)據(jù)時，隱藏select 
});

當然，你還可以擴展，自定義下拉列表選項數(shù)據(jù)，你可以根據(jù)需要設置下拉內(nèi)容，注意數(shù)據(jù)格式一定要為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":"數(shù)據(jù)庫","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]}, 
  ]}, 
  prov:"", 
  city:"", 
  dist:"", 
  nodata:"none" 
});

你還可以利用PHP等后臺語言將數(shù)據(jù)庫中的數(shù)據(jù)轉換成JSON格式，然后使用url參數(shù)指向后臺地址也能實現(xiàn)無刷新聯(lián)動效果。

 
$("#city").citySelect({ 
  url:"data.php" 
});

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理
很多App中,新聞或者展示類都存在下拉刷新和上拉加載的效果，如何實現(xiàn)上拉刷新下拉加載更多頁面的呢？下面小編通過下面內(nèi)容給大家介紹jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理，需要的朋友可以參考下
2015-08-08
jQuery實現(xiàn)Select下拉列表進行狀態(tài)選擇功能
本文主要介紹了jQuery實現(xiàn)Select下拉列表進行狀態(tài)選擇功能的代碼。具有很好的參考價值，下面跟著小編一起來看下吧
2017-03-03
基于JQuery的模擬蘋果桌面Dock效果(穩(wěn)定版)
之所以將它命名為穩(wěn)定版，是因為之前已經(jīng)分享了一個初級版本的，之前的初級版中存在很多bug。現(xiàn)在經(jīng)過反復琢磨、實驗，修復了之前版本存在的很多不足之處，就算鼠標快速的滑動依然表現(xiàn)的很穩(wěn)定
2012-10-10
jQuery+Ajax+js實現(xiàn)請求json格式數(shù)據(jù)并渲染到html頁面操作示例
這篇文章主要介紹了jQuery+Ajax+js實現(xiàn)請求json格式數(shù)據(jù)并渲染到html頁面操作,結合實例形式分析了jQuery+Ajax請求json格式數(shù)據(jù)并渲染到html頁面相關步驟與操作技巧,需要的朋友可以參考下
2020-06-06
jQuery實現(xiàn)的Div窗口震動特效
這篇文章主要介紹了jQuery實現(xiàn)的Div窗口震動特效 ,需要的朋友可以參考下
2014-06-06
根據(jù)Bootstrap Paginator改寫的js分頁插件
本文主要對根據(jù)Bootstrap Paginator改寫的js插件進行詳細介紹，具有很好的參考價值，需要的朋友一起來看下吧
2016-12-12
jQuery實現(xiàn)導航回彈效果
本文主要介紹了jQuery實現(xiàn)導航回彈效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
20個最新的jQuery插件
jQuery 是一個非常優(yōu)秀的 JavaScript 框架，使用簡單靈活，同時還有許多成熟的插件可供選擇，它可以幫助你在項目中加入一些非常好的效果
2012-01-01
jQuery實現(xiàn)的類flash菜單效果代碼
這里要說的就是一個菜單的hover的效果，一般我們通過CSS的偽類:hover實現(xiàn)的菜單切換都比較單調，因為僅僅是一個簡單的圖片的變化，不像很多flash菜單一樣變化非常的平滑，但是這里我們就是要用非flash的技術實現(xiàn)一個平滑的hover效果。
2010-05-05
jQuery simpleModal插件的使用介紹
SimpleModal是一個輕量級的jQuery插件，它提供了一個模式對話框發(fā)展強大的接口。這篇文章主要介紹了jQuery simpleModal插件的使用，非常不錯，具有參考借鑒價值，對jquery simplemodal相關知識感興趣的朋友一起學習吧
2016-08-08