console
window.areaJson = {
"1300": {
"name": "河北省",
"sub": {
"1301": {
"name": "石家庄市",
"sub": {
"130101": "市辖区",
"130102": "长安区",
"130103": "桥东区",
"130104": "桥西区",
"130105": "新华区",
"130107": "井陉矿区",
"130108": "裕华区",
"130121": "井陉县",
"130123": "正定县",
"130124": "栾城县",
"130125": "行唐县",
"130126": "灵寿县",
"130127": "高邑县",
"130128": "深泽县",
"130129": "赞皇县",
"130130": "无极县",
"130131": "平山县",
"130132": "元氏县",
"130133": "赵县",
"130181": "辛集市",
"130182": "藁城市",
"130183": "晋州市",
"130184": "新乐市",
"130185": "鹿泉市"
}
},
"1302": {
"name": "唐山市",
"sub": {
"130201": "市辖区",
"130202": "路南区",
"130203": "路北区",
"130204": "古冶区",
"130205": "开平区",
"130207": "丰南区",
"130208": "丰润区",
"130223": "滦县",
"130224": "滦南县",
"130225": "乐亭县",
"130227": "迁西县",
"130229": "玉田县",
"130230": "唐海县",
"130281": "遵化市",
"130283": "迁安市"
}
},
"1303": {
"name": "秦皇岛市",
"sub": {
"130301": "市辖区",
"130302": "海港区",
"130303": "山海关区",
"130304": "北戴河区",
"130321": "青龙满族自治县",
"130322": "昌黎县",
"130323": "抚宁县",
"130324": "卢龙县"
}
},
"1304": {
"name": "邯郸市",
"sub": {
"130401": "市辖区",
"130402": "邯山区",
"130403": "丛台区",
"130404": "复兴区",
"130406": "峰峰矿区",
"130421": "邯郸县",
"130423": "临漳县",
"130424": "成安县",
"130425": "大名县",
"130426": "涉县",
"130427": "磁县",
"130428": "肥乡县",
"130429": "永年县",
"130430": "邱县",
"130431": "鸡泽县",
"130432": "广平县",
"130433": "馆陶县",
"130434": "魏县",
"130435": "曲周县",
"130481": "武安市"
}
},
"1305": {
"name": "邢台市",
"sub": {
"130501": "市辖区",
"130502": "桥东区",
"130503": "桥西区",
"130521": "邢台县",
"130522": "临城县",
"130523": "内邱县",
"130524": "柏乡县",
"130525": "隆尧县",
"130526": "任县",
"130527": "南和县",
"130528": "宁晋县",
"130529": "巨鹿县",
"130530": "新河县",
"130531": "广宗县",
"130532": "平乡县",
"130533": "威县",
"130534": "清河县",
"130535": "临西县",
"130581": "南宫市",
"130582": "沙河市"
}
},
"1306": {
"name": "保定市",
"sub": {
"130601": "市辖区",
"130602": "新市区",
"130603": "北市区",
"130604": "南市区",
"130621": "满城县",
"130622": "清苑县",
"130623": "涞水县",
"130624": "阜平县",
"130625": "徐水县",
"130626": "定兴县",
"130627": "唐县",
"130628": "高阳县",
"130629": "容城县",
"130630": "涞源县",
"130631": "望都县",
"130632": "安新县",
"130633": "易县",
"130634": "曲阳县",
"130635": "蠡县",
"130636": "顺平县",
"130637": "博野县",
"130638": "雄县",
"130681": "涿州市",
"130682": "定州市",
"130683": "安国市",
"130684": "高碑店市"
}
},
"1307": {
"name": "张家口市",
"sub": {
"130701": "市辖区",
"130702": "桥东区",
"130703": "桥西区",
"130705": "宣化区",
"130706": "下花园区",
"130721": "宣化县",
"130722": "张北县",
"130723": "康保县",
"130724": "沽源县",
"130725": "尚义县",
"130726": "蔚县",
"130727": "阳原县",
"130728": "怀安县",
"130729": "万全县",
"130730": "怀来县",
"130731": "涿鹿县",
"130732": "赤城县",
"130733": "崇礼县"
}
},
"1308": {
"name": "承德市",
"sub": {
"130801": "市辖区",
"130802": "双桥区",
"130803": "双滦区",
"130804": "鹰手营子矿区",
"130821": "承德县",
"130822": "兴隆县",
"130823": "平泉县",
"130824": "滦平县",
"130825": "隆化县",
"130826": "丰宁满族自治县",
"130827": "宽城满族自治县",
"130828": "围场满族蒙古族自治县"
}
},
"1309": {
"name": "沧州市",
"sub": {
"130901": "市辖区",
"130902": "新华区",
"130903": "运河区",
"130921": "沧县",
"130922": "青县",
"130923": "东光县",
"130924": "海兴县",
"130925": "盐山县",
"130926": "肃宁县",
"130927": "南皮县",
"130928": "吴桥县",
"130929": "献县",
"130930": "孟村回族自治县",
"130981": "泊头市",
"130982": "任邱市",
"130983": "黄骅市",
"130984": "河间市"
}
},
"1310": {
"name": "廊坊市",
"sub": {
"131001": "市辖区",
"131002": "安次区",
"131003": "广阳区",
"131022": "固安县",
"131023": "永清县",
"131024": "香河县",
"131025": "大城县",
"131026": "文安县",
"131028": "大厂回族自治县",
"131081": "霸州市",
"131082": "三河市"
}
},
"1311": {
"name": "衡水市",
"sub": {
"131101": "市辖区",
"131102": "桃城区",
"131121": "枣强县",
"131122": "武邑县",
"131123": "武强县",
"131124": "饶阳县",
"131125": "安平县",
"131126": "故城县",
"131127": "景县",
"131128": "阜城县",
"131181": "冀州市",
"131182": "深州市"
}
}
}
}
};
new Vue({
el: '#app',
data: function() {
return {
formArr: [{
province: '', //省
city: '', //市
area: '', //区
tempProvince: null,
tempCity: null,
tempArea: null
}],
areaJson: null,
submitJson: ''
}
},
ready: function() {
this.formArr[0]['tempProvince'] = window.areaJson;
this.areaJson = window.areaJson;
},
methods: {
add: function() {
var obj = {
province: '', //省
city: '', //市
area: '', //区
tempProvince: this.areaJson,
tempCity: null,
tempArea: null
};
this.formArr.push(obj);
},
del: function(index) {
this.formArr.splice(index, 1);
},
changeProvince: function(e) {
var $target = $(e.target);
var index = $target.attr('data-index');
var id = $target.val();
this.formArr[index].tempCity = null;
this.formArr[index].tempArea = null;
if ($.isEmptyObject(this.areaJson[id]['sub'])) {
var str = '{"' + id + '" : { "name":"' + this.areaJson[id]['name'] + '"}}';
var str1 = '{"' + id + '" : "' + this.areaJson[id]['name'] + '"}';
this.formArr[index]['tempCity'] = JSON.parse(str);
this.formArr[index].tempCity[id]['sub'] = JSON.parse(str1);
} else {
this.formArr[index].tempCity = this.areaJson[id]['sub'];
}
},
changeCity: function(e) {
var $target = $(e.target);
var index = $target.attr('data-index');
var id = $target.val();
this.formArr[index].tempArea = this.formArr[index].tempCity[id]['sub'];
},
submit: function() {
var arr = [];
var temp = this.formArr;
for (var i = 0; i < temp.length; i++) {
var form = temp[i];
var tempForm = {
province: form.province, //省
city: form.city, //市
area: form.area //区
}
arr[i] = tempForm;
}
this.submitJson = JSON.stringify(arr);
}
}
})
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="app">
<h3>
vue 实现省市三级联动，可以动态增加省市三级联动模块
</h3>
<p v-for="form in formArr">
<select class="select" v-model="form.province" class="province" data-index="{{$index}}" v-on:change="changeProvince">
<option value="-1" selected>省份</option>
<option v-for="area in form.tempProvince" value="{{$key}}" v-if="area.name">{{area.name}}</option>
</select>
<select class="select" v-model="form.city" v-on:change="changeCity" data-index="{{$index}}">
<option value="-1" selected>市</option>
<option v-for="city in form.tempCity" value="{{$key}}">{{city.name}}</option>
</select>
<select class="select" v-model="form.area">
<option value="-1" selected>县</option>
<option v-for="area in form.tempArea" value="{{$key}}">{{area}}</option>
</select>
<button @click="add" v-if="$index == 0">添加</button>
<button @click="del($index)" v-if="$index != 0">删除</button>
</p>
<h3>提交的数据：</h3>
<p>{{submitJson}}</p>
<p>
<button @click="submit">提交</button>
</p>
</div>