您現在的位置：

北京市天津市河北省 山西省內蒙古自治區遼寧省 吉林省黑龍江省上海市 江蘇省浙江省安徽省 福建省江西省山東省 河南省湖北省湖南省 廣東省廣西壯族自治區海南省 重慶市四川省貴州省 云南省西藏自治區陜西省 甘肅省青海省寧夏回族自治區 新疆維吾爾自治區臺灣省香港特別行政區 澳門特別行政區? 杭州市寧波市溫州市 嘉興市湖州市紹興市 金華市衢州市舟山市 臺州市麗水市? 越城區柯橋區上虞區 新昌縣諸暨市嵊州市

根據IP地址定位：IP接口文檔

北京市天津市河北省 山西省內蒙古自治區遼寧省 吉林省黑龍江省上海市 江蘇省浙江省安徽省 福建省江西省山東省 河南省湖北省湖南省 廣東省廣西壯族自治區海南省 重慶市四川省貴州省 云南省西藏自治區陜西省 甘肅省青海省寧夏回族自治區 新疆維吾爾自治區臺灣省香港特別行政區 澳門特別行政區? 福州市廈門市莆田市 三明市泉州市漳州市 南平市龍巖市寧德市? 思明區海滄區湖里區 集美區同安區翔安區

通過地區編碼初始化設置

$('#demo').citys({code:350206});

北京市天津市河北省 山西省內蒙古自治區遼寧省 吉林省黑龍江省上海市 江蘇省浙江省安徽省 福建省江西省山東省 河南省湖北省湖南省 廣東省廣西壯族自治區海南省 重慶市四川省貴州省 云南省西藏自治區陜西省 甘肅省青海省寧夏回族自治區 新疆維吾爾自治區臺灣省香港特別行政區 澳門特別行政區? 福州市廈門市莆田市 三明市泉州市漳州市 南平市龍巖市寧德市? 思明區海滄區湖里區 集美區同安區翔安區

通過地區名稱初始化設置，并且下拉框值為地區名稱

$('#demo1').citys({valueType:'name',province:'福建',city:'廈門',area:'思明'});

?- 請選擇 -?北京市天津市 河北省山西省內蒙古自治區 遼寧省吉林省黑龍江省 上海市江蘇省浙江省 安徽省福建省江西省 山東省河南省湖北省 湖南省廣東省廣西壯族自治區 海南省重慶市四川省 貴州省云南省西藏自治區 陜西省甘肅省青海省 寧夏回族自治區新疆維吾爾自治區臺灣省 香港特別行政區澳門特別行政區? ?- 請選擇 -?

請選擇地區

事件處理

$('#demo2').citys({required:false,nodata:'disabled',onChange:function(data){var text = data['direct']?'(直轄市)':'';$('#place').text('當前選中地區：'+data['province']+text+' '+data['city']+' '+data['area']);} });

北京市天津市河北省 山西省內蒙古自治區遼寧省 吉林省黑龍江省上海市 江蘇省浙江省安徽省 福建省江西省山東省 河南省湖北省湖南省 廣東省廣西壯族自治區海南省 重慶市四川省貴州省 云南省西藏自治區陜西省 甘肅省青海省寧夏回族自治區 新疆維吾爾自治區臺灣省香港特別行政區 澳門特別行政區? 福州市廈門市莆田市 三明市泉州市漳州市 南平市龍巖市寧德市? 思明區海滄區湖里區 集美區同安區翔安區? 廈港街道中華街道濱海街道 鷺江街道開元街道 梧村街道筼筜街道蓮前街道 嘉蓮街道鼓浪嶼街道

擴展顯示行政區劃第四級(街道)信息：

var $town = $('#demo3 select[name="town"]');var townFormat = function(info){$town.hide().empty();if(info['code']%1e4&&info['code']<7e6){ //是否為“區”且不是港澳臺地區$.ajax({url:'http://passer-by.com/data_location/town/'+info['code']+'.json',dataType:'json',success:function(town){$town.show();for(i in town){$town.append('<option value="'+i+'">'+town[i]+'</option>');}}});}};$('#demo3').citys({province:'福建',city:'廈門',area:'思明',onChange:function(info){townFormat(info);}},function(api){var info = api.getInfo();townFormat(info);});

調用方法：

$(selector).citys(options,callback);

options參數

參數 默認值 說明

dataUrl	[數據庫地址]	最新數據庫（2017年5月）：JSON格式JSONP格式 數據庫項目：中國行政區劃（省、市、區、街道）
dataType	'json'	數據庫類型:'json'或'jsonp' IE9-由于默認安全設置，需開啟“通過域訪問數據源”才能跨域訪問json，此類情況建議使用jsonp格式
provinceField	'province'	省份(省級)字段名
cityField	'city'	城市(地級)字段名
areaField	'area'	地區(縣區級)字段名
valueType	'code'	下拉框值的類型,code行政區劃代碼,name地名
code	0	地區編碼
province	[無]	省份(省級),可以為地區編碼或者名稱
city	[無]	城市(地級),可以為地區編碼或者名稱
area	[無]	地區(縣區級),可以為地區編碼或者名稱
required	true	是否必須選中(是否自動選擇地區)
nodata	'hidden'	當無數據時的表現形式:'hidden'隱藏,'disabled'禁用,為空不做任何處理
onChange	[無]	地區切換時觸發,回調函數傳入地區信息:direct是否為直轄市,province省份(省級)名稱,city城市(地級)名稱,area地區(縣區級)名稱,code地區編碼

callback(api)參數

方法 說明

getInfo(data)	獲取當前選中的地區信息:direct是否為直轄市,province省份(省級)名稱,city城市(地級)名稱,area地區(縣區級)名稱,code地區編碼

總結

以上是生活随笔為你收集整理的城市三级联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。