快捷導(dǎo)航

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

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

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

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

HTML

首先在head中載入jquery庫(kù)和cityselect插件。

 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.cityselect.js"></script>

接下來(lái)，我們?cè)?city中，放置三個(gè)select，并且三個(gè)select分別設(shè)置class屬性為：prov、city、dist，分別表示省、市、區(qū)（縣）三個(gè)下拉框。注意如果只想實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)，則去掉第三個(gè)dist的select即可。

 
<div id="city"> 
   <select class="prov"></select> 
  <select class="city" disabled="disabled"></select> 
  <select class="dist" disabled="disabled"></select> 
</div>

jQuery

調(diào)用cityselect插件非常簡(jiǎn)單，直接調(diào)用：

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

自定義參數(shù)調(diào)用，設(shè)置默認(rèn)省市區(qū)。

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

當(dāng)然，你還可以擴(kuò)展，自定義下拉列表選項(xiàng)數(shù)據(jù)，你可以根據(jù)需要設(shè)置下拉內(nèi)容，注意數(shù)據(jù)格式一定要為JSON格式。

 
$("#city").citySelect({ 
  url:{"citylist":[ 
    {"p":"前端技術(shù)","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]}, 
    {"n":"JAVASCIPT"}]}, 
    {"p":"編程語(yǔ)言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]}, 
    {"p":"數(shù)據(jù)庫(kù)","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]}, 
  ]}, 
  prov:"", 
  city:"", 
  dist:"", 
  nodata:"none" 
});

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

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

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

您可能感興趣的文章:

相關(guān)文章

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