<!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': '静海县',
'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': '福海县',
'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实现省市区联动
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 今天网上发现这个资料非常符合今天的能量,于是把它整理出来跟大家分享。 有些同台对唱 一生只有一次 时间总是残忍,这...