<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>city demo</title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.7/vue.min.js"></script>
</head>
<body>
<div id="app">
<form>
<select v-model="province" style="width:100px;" name="province">
<option value="" selected="selected">請選擇</option>
<option v-for="item in provinceList" v-bind:value="item.text">{{item.text}}</option>
</select>
<select v-model="city" style="width:100px;" name="city">
<option value="" selected="selected">請選擇</option>
<option v-for="item in cityList" v-bind:value="item.text">{{item.text}}</option>
</select>
<select v-model="qu" style="width:100px;" name="qu">
<option value="" selected="selected">請選擇</option>
<option v-for="item in quList" v-bind:value="item.text">{{item.text}}</option>
</select>
</form>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
mounted:function(){
this.getProvinceList();
},
methods:{
getProvinceList:function(){
var self = this,
provinceList = [],
cityList = [];
for(var i=0,j=self.area.length; i < j; i++){
console.log(j);
if(self.area[i] && self.area[i].text){
provinceList.push({text:self.area[i].text,value:self.area[i].value})
}
}
console.log(provinceList);
self.provinceList = provinceList;
}
},
watch:{
"province":function(newVal,oldVal){
var self = this;
if(newVal && newVal!=oldVal){
self.city='';
self.cityList=[];
self.quList=[];
var provinceItem;
for(var i=0,j=self.area.length; i < j; i++){
if(self.area[i].text == newVal){
provinceItem = self.area[i];
//console.log(provinceItem);
self.cacheQu = provinceItem.child;
console.log(self.cacheQu);
}
}
var cityList = [];
if(provinceItem && provinceItem.child){
for(var m=0;m<provinceItem.child.length;m++){
//直轄市特殊處理
if(provinceItem.child[m] && (provinceItem.child[m].text=='市轄區' || provinceItem.child[m].text=='縣')){
for(var n=0;n<provinceItem.child[m].child.length;n++){
cityList.push({text:provinceItem.child[m].child[n].text,value:provinceItem.child[m].child[n].value});
}
}else{
cityList.push({text:provinceItem.child[m].text,value:provinceItem.child[m].value});
}
}
}
this.cityList = cityList;
}
},
"city":function(newVal,oldVal){
var self = this;
if(newVal && newVal != oldVal){
self.qu='';
self.quList=[];
var quData = [],selctCityData=[];
if(self.cacheQu && self.cacheQu.length > 0){
for(var j=0;j<self.cacheQu.length;j++){
if(self.cacheQu[j].text == newVal){
quData = self.cacheQu[j].child;
}
}
for(var i=0;i<quData.length; i++){
self.quList.push({text:quData[i].text,value:quData[i].value});
}
}
}
}
},
data:{
province:'',
provinceList:[],
city:'',
cityList:[],
qu:'',
cacheQu:[],
quList:[],
area: [{
'child': [{
'child': [{
'text': '東城區',
'value': '110101'
}, {
'text': '西城區',
'value': '110102'
}, {
'text': '崇文區',
'value': '110103'
}, {
'text': '宣武區',
'value': '110104'
}, {
'text': '朝陽區',
'value': '110105'
}, {
'text': '豐臺區',
'value': '110106'
}, {
'text': '石景山區',
'value': '110107'
}, {
'text': '海淀區',
'value': '110108'
}, {
'text': '門頭溝區',
'value': '110109'
}, {
'text': '房山區',
'value': '110111'
}, {
'text': '通州區',
'value': '110112'
}, {
'text': '順義區',
'value': '110113'
}, {
'text': '昌平區',
'value': '110114'
}, {
'text': '大興區',
'value': '110115'
}, {
'text': '懷柔區',
'value': '110116'
}, {
'text': '平谷區',
'value': '110117'
}],
'text': '市轄區',
'value': '110100'
}, {
'child': [{
'text': '密云縣',
'value': '110228'
}, {
'text': '延慶縣',
'value': '110229'
}],
'text': '縣',
'value': '110200'
}],
'text': '北京市',
'value': '110000'
}, {
'child': [{
'child': [{
'text': '和平區',
'value': '120101'
}, {
'text': '河東區',
'value': '120102'
}, {
'text': '河西區',
'value': '120103'
}, {
'text': '南開區',
'value': '120104'
}, {
'text': '河北區',
'value': '120105'
}, {
'text': '紅橋區',
'value': '120106'
}, {
'text': '塘沽區',
'value': '120107'
}, {
'text': '漢沽區',
'value': '120108'
}, {
'text': '大港區',
'value': '120109'
}, {
'text': '東麗區',
'value': '120110'
}, {
'text': '西青區',
'value': '120111'
}, {
'text': '津南區',
'value': '120112'
}, {
'text': '北辰區',
'value': '120113'
}, {
'text': '武清區',
'value': '120114'
}, {
'text': '寶坻區',
'value': '120115'
}, {
'text': '濱海新區',
'value': '120116'
}],
'text': '市轄區',
'value': '120100'
}, {
'child': [{
'text': '寧河縣',
'value': '120221'
}, {
'text': '靜??h',
'value': '120223'
}, {
'text': '薊縣',
'value': '120225'
}],
'text': '縣',
'value': '120200'
}],
'text': '天津市',
'value': '120000'
},{
'child': [{
'child': [{
'text': '市轄區',
'value': '430101'
}, {
'text': '芙蓉區',
'value': '430102'
}, {
'text': '天心區',
'value': '430103'
}, {
'text': '岳麓區',
'value': '430104'
}, {
'text': '開福區',
'value': '430105'
}, {
'text': '雨花區',
'value': '430111'
}, {
'text': '長沙縣',
'value': '430121'
}, {
'text': '望城縣',
'value': '430122'
}, {
'text': '寧鄉縣',
'value': '430124'
}, {
'text': '瀏陽市',
'value': '430181'
}],
'text': '長沙市',
'value': '430100'
}, {
'child': [{
'text': '市轄區',
'value': '430201'
}, {
'text': '荷塘區',
'value': '430202'
}, {
'text': '蘆淞區',
'value': '430203'
}, {
'text': '石峰區',
'value': '430204'
}, {
'text': '天元區',
'value': '430211'
}, {
'text': '株洲縣',
'value': '430221'
}, {
'text': '攸縣',
'value': '430223'
}, {
'text': '茶陵縣',
'value': '430224'
}, {
'text': '炎陵縣',
'value': '430225'
}, {
'text': '醴陵市',
'value': '430281'
}],
'text': '株洲市',
'value': '430200'
}, {
'child': [{
'text': '市轄區',
'value': '430301'
}, {
'text': '雨湖區',
'value': '430302'
}, {
'text': '岳塘區',
'value': '430304'
}, {
'text': '湘潭縣',
'value': '430321'
}, {
'text': '湘鄉市',
'value': '430381'
}, {
'text': '韶山市',
'value': '430382'
}],
'text': '湘潭市',
'value': '430300'
}, {
'child': [{
'text': '市轄區',
'value': '430401'
}, {
'text': '珠暉區',
'value': '430405'
}, {
'text': '雁峰區',
'value': '430406'
}, {
'text': '石鼓區',
'value': '430407'
}, {
'text': '蒸湘區',
'value': '430408'
}, {
'text': '南岳區',
'value': '430412'
}, {
'text': '衡陽縣',
'value': '430421'
}, {
'text': '衡南縣',
'value': '430422'
}, {
'text': '衡山縣',
'value': '430423'
}, {
'text': '衡東縣',
'value': '430424'
}, {
'text': '祁東縣',
'value': '430426'
}, {
'text': '耒陽市',
'value': '430481'
}, {
'text': '常寧市',
'value': '430482'
}],
'text': '衡陽市',
'value': '430400'
}, {
'child': [{
'text': '市轄區',
'value': '430501'
}, {
'text': '雙清區',
'value': '430502'
}, {
'text': '大祥區',
'value': '430503'
}, {
'text': '北塔區',
'value': '430511'
}, {
'text': '邵東縣',
'value': '430521'
}, {
'text': '新邵縣',
'value': '430522'
}, {
'text': '邵陽縣',
'value': '430523'
}, {
'text': '隆回縣',
'value': '430524'
}, {
'text': '洞口縣',
'value': '430525'
}, {
'text': '綏寧縣',
'value': '430527'
}, {
'text': '新寧縣',
'value': '430528'
}, {
'text': '城步苗族自治縣',
'value': '430529'
}, {
'text': '武岡市',
'value': '430581'
}],
'text': '邵陽市',
'value': '430500'
}, {
'child': [{
'text': '市轄區',
'value': '430601'
}, {
'text': '岳陽樓區',
'value': '430602'
}, {
'text': '云溪區',
'value': '430603'
}, {
'text': '君山區',
'value': '430611'
}, {
'text': '岳陽縣',
'value': '430621'
}, {
'text': '華容縣',
'value': '430623'
}, {
'text': '湘陰縣',
'value': '430624'
}, {
'text': '平江縣',
'value': '430626'
}, {
'text': '汨羅市',
'value': '430681'
}, {
'text': '臨湘市',
'value': '430682'
}],
'text': '岳陽市',
'value': '430600'
}, {
'child': [{
'text': '市轄區',
'value': '430701'
}, {
'text': '武陵區',
'value': '430702'
}, {
'text': '鼎城區',
'value': '430703'
}, {
'text': '安鄉縣',
'value': '430721'
}, {
'text': '漢壽縣',
'value': '430722'
}, {
'text': '澧縣',
'value': '430723'
}, {
'text': '臨澧縣',
'value': '430724'
}, {
'text': '桃源縣',
'value': '430725'
}, {
'text': '石門縣',
'value': '430726'
}, {
'text': '津市市',
'value': '430781'
}],
'text': '常德市',
'value': '430700'
}, {
'child': [{
'text': '市轄區',
'value': '430801'
}, {
'text': '永定區',
'value': '430802'
}, {
'text': '武陵源區',
'value': '430811'
}, {
'text': '慈利縣',
'value': '430821'
}, {
'text': '桑植縣',
'value': '430822'
}],
'text': '張家界市',
'value': '430800'
}, {
'child': [{
'text': '市轄區',
'value': '430901'
}, {
'text': '資陽區',
'value': '430902'
}, {
'text': '赫山區',
'value': '430903'
}, {
'text': '南縣',
'value': '430921'
}, {
'text': '桃江縣',
'value': '430922'
}, {
'text': '安化縣',
'value': '430923'
}, {
'text': '沅江市',
'value': '430981'
}],
'text': '益陽市',
'value': '430900'
}, {
'child': [{
'text': '市轄區',
'value': '431001'
}, {
'text': '北湖區',
'value': '431002'
}, {
'text': '蘇仙區',
'value': '431003'
}, {
'text': '桂陽縣',
'value': '431021'
}, {
'text': '宜章縣',
'value': '431022'
}, {
'text': '永興縣',
'value': '431023'
}, {
'text': '嘉禾縣',
'value': '431024'
}, {
'text': '臨武縣',
'value': '431025'
}, {
'text': '汝城縣',
'value': '431026'
}, {
'text': '桂東縣',
'value': '431027'
}, {
'text': '安仁縣',
'value': '431028'
}, {
'text': '資興市',
'value': '431081'
}],
'text': '郴州市',
'value': '431000'
}, {
'child': [{
'text': '市轄區',
'value': '431101'
}, {
'text': '芝山區',
'value': '431102'
}, {
'text': '冷水灘區',
'value': '431103'
}, {
'text': '祁陽縣',
'value': '431121'
}, {
'text': '東安縣',
'value': '431122'
}, {
'text': '雙牌縣',
'value': '431123'
}, {
'text': '道縣',
'value': '431124'
}, {
'text': '江永縣',
'value': '431125'
}, {
'text': '寧遠縣',
'value': '431126'
}, {
'text': '藍山縣',
'value': '431127'
}, {
'text': '新田縣',
'value': '431128'
}, {
'text': '江華瑤族自治縣',
'value': '431129'
}],
'text': '永州市',
'value': '431100'
}, {
'child': [{
'text': '市轄區',
'value': '431201'
}, {
'text': '鶴城區',
'value': '431202'
}, {
'text': '中方縣',
'value': '431221'
}, {
'text': '沅陵縣',
'value': '431222'
}, {
'text': '辰溪縣',
'value': '431223'
}, {
'text': '溆浦縣',
'value': '431224'
}, {
'text': '會同縣',
'value': '431225'
}, {
'text': '麻陽苗族自治縣',
'value': '431226'
}, {
'text': '新晃侗族自治縣',
'value': '431227'
}, {
'text': '芷江侗族自治縣',
'value': '431228'
}, {
'text': '靖州苗族侗族自治縣',
'value': '431229'
}, {
'text': '通道侗族自治縣',
'value': '431230'
}, {
'text': '洪江市',
'value': '431281'
}],
'text': '懷化市',
'value': '431200'
}, {
'child': [{
'text': '市轄區',
'value': '431301'
}, {
'text': '婁星區',
'value': '431302'
}, {
'text': '雙峰縣',
'value': '431321'
}, {
'text': '新化縣',
'value': '431322'
}, {
'text': '冷水江市',
'value': '431381'
}, {
'text': '漣源市',
'value': '431382'
}],
'text': '婁底市',
'value': '431300'
}, {
'child': [{
'text': '吉首市',
'value': '433101'
}, {
'text': '瀘溪縣',
'value': '433122'
}, {
'text': '鳳凰縣',
'value': '433123'
}, {
'text': '花垣縣',
'value': '433124'
}, {
'text': '保靖縣',
'value': '433125'
}, {
'text': '古丈縣',
'value': '433126'
}, {
'text': '永順縣',
'value': '433127'
}, {
'text': '龍山縣',
'value': '433130'
}],
'text': '湘西土家族苗族自治州',
'value': '433100'
}],
'text': '湖南省',
'value': '430000'
},{
'child': [{
'child': [{
'text': '市轄區',
'value': '650101'
}, {
'text': '天山區',
'value': '650102'
}, {
'text': '沙依巴克區',
'value': '650103'
}, {
'text': '新市區',
'value': '650104'
}, {
'text': '水磨溝區',
'value': '650105'
}, {
'text': '頭屯河區',
'value': '650106'
}, {
'text': '達坂城區',
'value': '650107'
}, {
'text': '東山區',
'value': '650108'
}, {
'text': '烏魯木齊縣',
'value': '650121'
}],
'text': '烏魯木齊市',
'value': '650100'
}, {
'child': [{
'text': '市轄區',
'value': '650201'
}, {
'text': '獨山子區',
'value': '650202'
}, {
'text': '克拉瑪依區',
'value': '650203'
}, {
'text': '白堿灘區',
'value': '650204'
}, {
'text': '烏爾禾區',
'value': '650205'
}],
'text': '克拉瑪依市',
'value': '650200'
}, {
'child': [{
'text': '吐魯番市',
'value': '652101'
}, {
'text': '鄯善縣',
'value': '652122'
}, {
'text': '托克遜縣',
'value': '652123'
}],
'text': '吐魯番地區',
'value': '652100'
}, {
'child': [{
'text': '哈密市',
'value': '652201'
}, {
'text': '巴里坤哈薩克自治縣',
'value': '652222'
}, {
'text': '伊吾縣',
'value': '652223'
}, {
'text': '三道嶺',
'value': '652224'
}],
'text': '哈密地區',
'value': '652200'
}, {
'child': [{
'text': '昌吉市',
'value': '652301'
}, {
'text': '阜康市',
'value': '652302'
}, {
'text': '米泉市',
'value': '652303'
}, {
'text': '呼圖壁縣',
'value': '652323'
}, {
'text': '瑪納斯縣',
'value': '652324'
}, {
'text': '奇臺縣',
'value': '652325'
}, {
'text': '吉木薩爾縣',
'value': '652327'
}, {
'text': '木壘哈薩克自治縣',
'value': '652328'
}],
'text': '昌吉回族自治州',
'value': '652300'
}, {
'child': [{
'text': '博樂市',
'value': '652701'
}, {
'text': '精河縣',
'value': '652722'
}, {
'text': '溫泉縣',
'value': '652723'
}],
'text': '博爾塔拉蒙古自治州',
'value': '652700'
}, {
'child': [{
'text': '庫爾勒市',
'value': '652801'
}, {
'text': '輪臺縣',
'value': '652822'
}, {
'text': '尉犁縣',
'value': '652823'
}, {
'text': '若羌縣',
'value': '652824'
}, {
'text': '且末縣',
'value': '652825'
}, {
'text': '焉耆回族自治縣',
'value': '652826'
}, {
'text': '和靜縣',
'value': '652827'
}, {
'text': '和碩縣',
'value': '652828'
}, {
'text': '博湖縣',
'value': '652829'
}],
'text': '巴音郭楞蒙古自治州',
'value': '652800'
}, {
'child': [{
'text': '阿克蘇市',
'value': '652901'
}, {
'text': '溫宿縣',
'value': '652922'
}, {
'text': '庫車縣',
'value': '652923'
}, {
'text': '沙雅縣',
'value': '652924'
}, {
'text': '新和縣',
'value': '652925'
}, {
'text': '拜城縣',
'value': '652926'
}, {
'text': '烏什縣',
'value': '652927'
}, {
'text': '阿瓦提縣',
'value': '652928'
}, {
'text': '柯坪縣',
'value': '652929'
}],
'text': '阿克蘇地區',
'value': '652900'
}, {
'child': [{
'text': '阿圖什市',
'value': '653001'
}, {
'text': '阿克陶縣',
'value': '653022'
}, {
'text': '阿合奇縣',
'value': '653023'
}, {
'text': '烏恰縣',
'value': '653024'
}],
'text': '克孜勒蘇柯爾克孜自治州',
'value': '653000'
}, {
'child': [{
'text': '喀什市',
'value': '653101'
}, {
'text': '疏附縣',
'value': '653121'
}, {
'text': '疏勒縣',
'value': '653122'
}, {
'text': '英吉沙縣',
'value': '653123'
}, {
'text': '澤普縣',
'value': '653124'
}, {
'text': '莎車縣',
'value': '653125'
}, {
'text': '葉城縣',
'value': '653126'
}, {
'text': '麥蓋提縣',
'value': '653127'
}, {
'text': '岳普湖縣',
'value': '653128'
}, {
'text': '伽師縣',
'value': '653129'
}, {
'text': '巴楚縣',
'value': '653130'
}, {
'text': '塔什庫爾干塔吉克自治縣',
'value': '653131'
}],
'text': '喀什地區',
'value': '653100'
}, {
'child': [{
'text': '和田市',
'value': '653201'
}, {
'text': '和田縣',
'value': '653221'
}, {
'text': '墨玉縣',
'value': '653222'
}, {
'text': '皮山縣',
'value': '653223'
}, {
'text': '洛浦縣',
'value': '653224'
}, {
'text': '策勒縣',
'value': '653225'
}, {
'text': '于田縣',
'value': '653226'
}, {
'text': '民豐縣',
'value': '653227'
}],
'text': '和田地區',
'value': '653200'
}, {
'child': [{
'text': '伊寧市',
'value': '654002'
}, {
'text': '奎屯市',
'value': '654003'
}, {
'text': '伊寧縣',
'value': '654021'
}, {
'text': '察布查爾錫伯自治縣',
'value': '654022'
}, {
'text': '霍城縣',
'value': '654023'
}, {
'text': '鞏留縣',
'value': '654024'
}, {
'text': '新源縣',
'value': '654025'
}, {
'text': '昭蘇縣',
'value': '654026'
}, {
'text': '特克斯縣',
'value': '654027'
}, {
'text': '尼勒克縣',
'value': '654028'
}],
'text': '伊犁哈薩克自治州',
'value': '654000'
}, {
'child': [{
'text': '塔城市',
'value': '654201'
}, {
'text': '烏蘇市',
'value': '654202'
}, {
'text': '額敏縣',
'value': '654221'
}, {
'text': '沙灣縣',
'value': '654223'
}, {
'text': '托里縣',
'value': '654224'
}, {
'text': '裕民縣',
'value': '654225'
}, {
'text': '和布克賽爾蒙古自治縣',
'value': '654226'
}],
'text': '塔城地區',
'value': '654200'
}, {
'child': [{
'text': '阿勒泰市',
'value': '654301'
}, {
'text': '布爾津縣',
'value': '654321'
}, {
'text': '富蘊縣',
'value': '654322'
}, {
'text': '福??h',
'value': '654323'
}, {
'text': '哈巴河縣',
'value': '654324'
}, {
'text': '青河縣',
'value': '654325'
}, {
'text': '吉木乃縣',
'value': '654326'
}, {
'text': '北屯鎮',
'value': '654327'
}],
'text': '阿勒泰地區',
'value': '654300'
}, {
'child': [{
'text': '石河子市',
'value': '659001'
}, {
'text': '阿拉爾市',
'value': '659002'
}, {
'text': '圖木舒克市',
'value': '659003'
}, {
'text': '五家渠市',
'value': '659004'
}],
'text': '省直轄行政單位',
'value': '659000'
}],
'text': '新疆維吾爾自治區',
'value': '650000'
}]
}
})
</script>
</body>
</html>
vue實現省市區聯動
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
- 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
- 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
推薦閱讀更多精彩內容
- 今天網上發現這個資料非常符合今天的能量,于是把它整理出來跟大家分享。 有些同臺對唱 一生只有一次 時間總是殘忍,這...