-
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 -->
</head>
<body>
<div id="app">
<div class="cityBox">
<el-select v-model="prov">
<el-option v-for="(option, index) in arr" :disabled="edit" :value="option.name" :key="index">{
{ option.name }}</el-option>
</el-select>
<el-select v-model="city">
<el-option v-for="(option, index) in cityArr" :disabled="edit" :value="option.name" :key="index">{
{ option.name }}</el-option>
</el-select>
<el-select v-model="district" v-if="district">
<el-option v-for="(option, index) in districtArr" :disabled="edit" :value="option.name" :key="index">{
{ option.name }}</el-option>
</el-select>
</div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js">
</script>
<script type="module">
import area from './js/area.js'
new Vue({
el: '#app',
data: function() {
return {
arr: area.arrAll,
prov: '省份',
city: '城市',
district: '区域',
cityArr: [],
districtArr: [],
edit: false,
iscity: false,
isdistrict: false,
}
},
methods: {
updateCity: function() {
this.iscity = false;
for (var i in this.arr) {
var obj = this.arr[i];
if (obj.name) {
if (obj.name == this.prov) {
this.cityArr = obj.sub;
break;
}
}
}
if (this.cityArr && this.cityArr.length > 0 && this.cityArr[1].name) {
for (var i in this.cityArr) {
var obj = this.cityArr[i];
if (obj.name == this.city) {
this.city = obj.name;
this.iscity = true;
break;
}
}
if (!this.iscity) {
this.city = this.cityArr[1].name;
}
} else {
this.city = '城市';
}
},
//更新区域数据
updateDistrict: function() {
var i = 1;
this.isdistrict = false;
for (var i in this.cityArr) {
var obj = this.cityArr[i];
if (obj.name == this.city) {
this.districtArr = obj.sub;
break;
}
}
if(this.cityArr[i].sub!=undefined){
if(this.cityArr[i].sub[0].name!=""){
if (this.districtArr && this.districtArr.length > 0&&this.districtArr[1].name) {
for (var i in this.districtArr) {
var obj = this.districtArr[i];
if (obj.name == this.district) {
this.district = obj.name;
this.isdistrict = true;
break;
}
}
if (!this.isdistrict) {
this.district = this.districtArr[1].name;
}
}
}else{
this.district=""
}
}else{
this.district=""
}
}
},
beforeMount() {
this.updateCity();
this.updateDistrict();
},
watch: {
prov: function() {
this.updateCity();
this.updateDistrict();
},
city: function() {
this.updateDistrict();
}
}
})
</script>
</body>
</html>在js文件夹下建立area.js文件，写入如下
var arrAll =
[
{
name: "省份",
sub: [
{name: "城市",sub: [{name:'请选择'}, {name: "区域"}]},
{
name: "城市",
sub: [
{name: "请选择"},
{name: ""}, {name: "区域"},
],
type: 0
},
],
type: 1
},
{
name: "北京",
sub: [
{name: "请选择", sub: [{name:''}]},
{
name: "北京",
sub: [{name: "请选择"}, {name: "东城区"}, {name: "西城区"}, {name: "崇文区"}, {name: "宣武区"}, {name: "朝阳区"}, {name: "海淀区"}, {name: "丰台区"}, {name: "石景山区"}, {name: "房山区"}, {name: "通州区"}, {name: "顺义区"}, {name: "昌平区"}, {name: "大兴区"}, {name: "怀柔区"}, {name: "平谷区"}, {name: "门头沟区"}, {name: "密云县"}, {name: "延庆县"}, {name: "其他"}],
type: 0
}], type: 1
},
{
name: "广东",
sub: [{name: "请选择", sub: [{name:''}]},
{
name: "广州",
sub: [{name: "请选择"}, {name: "越秀区"}, {name: "荔湾区"}, {name: "海珠区"}, {name: "天河区"}, {name: "白云区"}, {name: "黄埔区"}, {name: "番禺区"}, {name: "花都区"}, {name: "南沙区"}, {name: "萝岗区"}, {name: "增城市"}, {name: "从化市"}, {name: "其他"}],
type: 0
},
{
name: "深圳",
sub: [{name: "请选择"}, {name: "福田区"}, {name: "罗湖区"}, {name: "南山区"}, {name: "宝安区"}, {name: "龙岗区"}, {name: "盐田区"}, {name: "其他"}],
type: 0
},
{
name: "珠海",
sub: [{name: "请选择"}, {name: "香洲区"}, {name: "斗门区"}, {name: "金湾区"}, {name: "其他"}],
type: 0
},
{
name: "汕头",
sub: [{name: "请选择"}, {name: "金平区"}, {name: "濠江区"}, {name: "龙湖区"}, {name: "潮阳区"}, {name: "潮南区"}, {name: "澄海区"}, {name: "南澳县"}, {name: "其他"}],
type: 0
},
{
name: "韶关",
sub: [{name: "请选择"}, {name: "浈江区"}, {name: "武江区"}, {name: "曲江区"}, {name: "乐昌市"}, {name: "南雄市"}, {name: "始兴县"}, {name: "仁化县"}, {name: "翁源县"}, {name: "新丰县"}, {name: "乳源瑶族自治县"}, {name: "其他"}],
type: 0
},
{
name: "佛山",
sub: [{name: "请选择"}, {name: "禅城区"}, {name: "南海区"}, {name: "顺德区"}, {name: "三水区"}, {name: "高明区"}, {name: "其他"}],
type: 0
},
{
name: "江门",
sub: [{name: "请选择"}, {name: "蓬江区"}, {name: "江海区"}, {name: "新会区"}, {name: "恩平市"}, {name: "台山市"}, {name: "开平市"}, {name: "鹤山市"}, {name: "其他"}],
type: 0
},
{
name: "湛江",
sub: [{name: "请选择"}, {name: "赤坎区"}, {name: "霞山区"}, {name: "坡头区"}, {name: "麻章区"}, {name: "吴川市"}, {name: "廉江市"}, {name: "雷州市"}, {name: "遂溪县"}, {name: "徐闻县"}, {name: "其他"}],
type: 0
},
{
name: "茂名",
sub: [{name: "请选择"}, {name: "茂南区"}, {name: "茂港区"}, {name: "化州市"}, {name: "信宜市"}, {name: "高州市"}, {name: "电白县"}, {name: "其他"}],
type: 0
},
{
name: "肇庆",
sub: [{name: "请选择"}, {name: "端州区"}, {name: "鼎湖区"}, {name: "高要市"}, {name: "四会市"}, {name: "广宁县"}, {name: "怀集县"}, {name: "封开县"}, {name: "德庆县"}, {name: "其他"}],
type: 0
},
{
name: "惠州",
sub: [{name: "请选择"}, {name: "惠城区"}, {name: "惠阳区"}, {name: "博罗县"}, {name: "惠东县"}, {name: "龙门县"}, {name: "其他"}],
type: 0
},
{
name: "梅州",
sub: [{name: "请选择"}, {name: "梅江区"}, {name: "兴宁市"}, {name: "梅县"}, {name: "大埔县"}, {name: "丰顺县"}, {name: "五华县"}, {name: "平远县"}, {name: "蕉岭县"}, {name: "其他"}],
type: 0
},
{
name: "汕尾",
sub: [{name: "请选择"}, {name: "城区"}, {name: "陆丰市"}, {name: "海丰县"}, {name: "陆河县"}, {name: "其他"}],
type: 0
},
{
name: "河源",
sub: [{name: "请选择"}, {name: "源城区"}, {name: "紫金县"}, {name: "龙川县"}, {name: "连平县"}, {name: "和平县"}, {name: "东源县"}, {name: "其他"}],
type: 0
},
{
name: "阳江",
sub: [{name: "请选择"}, {name: "江城区"}, {name: "阳春市"}, {name: "阳西县"}, {name: "阳东县"}, {name: "其他"}],
type: 0
},
{
name: "清远",
sub: [{name: "请选择"}, {name: "清城区"}, {name: "英德市"}, {name: "连州市"}, {name: "佛冈县"}, {name: "阳山县"}, {name: "清新县"}, {name: "连山壮族瑶族自治县"}, {name: "连南瑶族自治县"}, {name: "其他"}],
type: 0
},
{
name: "东莞",
sub: [{name:''}],
type: 0
},
{
name: "中山",
sub: [{name:''}],
type: 0
},
{
name: "潮州",
sub: [{name: "请选择"}, {name: "湘桥区"}, {name: "潮安县"}, {name: "饶平县"}, {name: "其他"}],
type: 0
},
{
name: "揭阳",
sub: [{name: "请选择"}, {name: "榕城区"}, {name: "普宁市"}, {name: "揭东县"}, {name: "揭西县"}, {name: "惠来县"}, {name: "其他"}],
type: 0
},
{
name: "云浮",
sub: [{name: "请选择"}, {name: "云城区"}, {name: "罗定市"}, {name: "云安县"}, {name: "新兴县"}, {name: "郁南县"}, {name: "其他"}],
type: 0
},
{name: "其他"}],
type: 1
},
{
name: "上海",
sub: [{name: "请选择", sub: [{name:''}]},
{
name: "上海",
sub: [{name: "请选择"}, {name: "黄浦区"}, {name: "卢湾区"}, {name: "徐汇区"}, {name: "长宁区"}, {name: "静安区"}, {name: "普陀区"}, {name: "闸北区"}, {name: "虹口区"}, {name: "杨浦区"}, {name: "宝山区"}, {name: "闵行区"}, {name: "嘉定区"}, {name: "松江区"}, {name: "金山区"}, {name: "青浦区"}, {name: "南汇区"}, {name: "奉贤区"}, {name: "浦东新区"}, {name: "崇明县"}, {name: "其他"}],
type: 0
}], type: 1
},
{
name: "天津",
sub: [{name: "请选择", sub: [{name:''}]},
{
name: "天津",
sub: [{name: "请选择"}, {name: "和平区"}, {name: "河东区"}, {name: "河西区"}, {name: "南开区"}, {name: "河北区"}, {name: "红桥区"}, {name: "塘沽区"}, {name: "汉沽区"}, {name: "大港区"}, {name: "东丽区"}, {name: "西青区"}, {name: "北辰区"}, {name: "津南区"}, {name: "武清区"}, {name: "宝坻区"}, {name: "静海县"}, {name: "宁河县"}, {name: "蓟县"}, {name: "其他"}],
type: 0
}], type: 1
},
{
name: "重庆",
sub: [{name: "请选择", sub: [{name:''}]},
{
name: "重庆",
sub: [{name: "请选择"}, {name: "渝中区"}, {name: "大渡口区"}, {name: "江北区"}, {name: "南岸区"}, {name: "北碚区"}, {name: "渝北区"}, {name: "巴南区"}, {name: "长寿区"}, {name: "双桥区"}, {name: "沙坪坝区"}, {name: "万盛区"}, {name: "万州区"}, {name: "涪陵区"}, {name: "黔江区"}, {name: "永川区"}, {name: "合川区"}, {name: "江津区"}, {name: "九龙坡区"}, {name: "南川区"}, {name: "綦江县"}, {name: "潼南县"}, {name: "荣昌县"}, {name: "璧山县"}, {name: "大足县"}, {name: "铜梁县"}, {name: "梁平县"}, {name: "开县"}, {name: "忠县"}, {name: "城口县"}, {name: "垫江县"}, {name: "武隆县"}, {name: "丰都县"}, {name: "奉节县"}, {name: "云阳县"}, {name: "巫溪县"}, {name: "巫山县"}, {name: "石柱土家族自治县"}, {name: "秀山土家族苗族自治县"}, {name: "酉阳土家族苗族自治县"}, {name: "彭水苗族土家族自治县"}, {name: "其他"}],
type: 0
}], type: 1
},
{
name: "辽宁",
sub: [{name: "请选择", sub: [{name:''}]},
{
name: "沈阳",
sub: [{name: "请选择"}, {name: "沈河区"}, {name: "皇姑区"}, {name: "和平区"}, {name: "大东区"}, {name: "铁西区"}, {name: "苏家屯区"}, {name: "东陵区"}, {name: "于洪区"}, {name: "新民市"}, {name: "法库县"}, {name: "辽中县"}, {name: "康平县"}, {name: "新城子区"}, {name: "其他"}],
type: 0
},
{
name: "大连",
sub: [{name: "请选择"}, {name: "西岗区"}, {name: "中山区"}, {name: "沙河口区"}, {name: "甘井子区"}, {name: "旅顺口区"}, {name: "金州区"}, {name: "瓦房店市"}, {name: "普兰店市"}, {name: "庄河市"}, {name: "长海县"}, {name: "其他"}],
type: 0
},
{
name: "鞍山",
sub: [{name: "请选择"}, {name: "铁东区"}, {name: "铁西区"}, {name: "立山区"}, {name: "千山区"}, {name: "海城市"}, {name: "台安县"}, {name: "岫岩满族自治县"}, {name: "其他"}],
type: 0
},
{
name: "抚顺",
sub: [{name: "请选择"}, {name: "顺城区"}, {name: "新抚区"}, {name: "东洲区"}, {name: "望花区"}, {name: "抚顺县"}, {name: "清原满族自治县"}, {name: "新宾满族自治县"}, {name: "其他"}],
type: 0
},
{
name: "本溪",
sub: [{name: "请选择"}, {name: "平山区"}, {name: "明山区"}, {name: "溪湖区"}, {name: "南芬区"}, {name: "本溪满族自治县"}, {name: "桓仁满族自治县"}, {name: "其他"}],
type: 0
},
{
name: "丹东",
sub: [{name: "请选择"}, {name: "振兴区"}, {name: "元宝区"}, {name: "振安区"}, {name: "东港市"}, {name: "凤城市"}, {name: "宽甸满族自治县"}, {name: "其他"}],
type: 0
},
{
name: "锦州",
sub: [{name: "请选择"}, {name: "太和区"}, {name: "古塔区"}, {name: "凌河区"}, {name: "凌海市"}, {name: "黑山县"}, {name: "义县"}, {name: "北宁市"}, {name: "其他"}],
type: 0
},
{
name: "营口",
sub: [{name: "请选择"}, {name: "站前区"}, {name: "西市区"}, {name: "鲅鱼圈区"}, {name: "老边区"}, {name: "大石桥市"}, {name: "盖州市"}, {name: "其他"}],
type: 0
},
{
name: "阜新",
sub: [{name: "请选择"}, {name: "海州区"}, {name: "新邱区"}, {name: "太平区"}, {name: "清河门区"}, {name: "细河区"}, {name: "彰武县"}, {name: "阜新蒙古族自治县"}, {name: "其他"}],
type: 0
},
{
name: "辽阳",
sub: [{name: "请选择"}, {name: "白塔区"}, {name: "文圣区"}, {name: "宏伟区"}, {name: "太子河区"}, {name: "弓长岭区"}, {name: "灯塔市"}, {name: "辽阳县"}, {name: "其他"}],
type: 0
},
{
name: "盘锦",
sub: [{name: "请选择"}, {name: "双台子区"}, {name: "兴隆台区"}, {name: "盘山县"}, {name: "大洼县"}, {name: "其他"}],
type: 0
},
{
name: "铁岭",
sub: [{name: "请选择"}, {name: "银州区"}, {name: "清河区"}, {name: "调兵山市"}, {name: "开原市"}, {name: "铁岭县"}, {name: "昌图县"}, {name: "西丰县"}, {name: "其他"}],
type: 0
},
{
name: "朝阳",
sub: [{name: "请选择"}, {name: "双塔区"}, {name: "龙城区"}, {name: "凌源市"}, {name: "北票市"}, {name: "朝阳县"}, {name: "建平县"}, {name: "喀喇沁左翼蒙古族自治县"}, {name: "其他"}],
type: 0
},
{
name: "葫芦岛",
sub: [{name: "请选择"}, {name: "龙港区"}, {name: "南票区"}, {name: "连山区"}, {name: "兴城市"}, {name: "绥中县"}, {name: "建昌县"}, {name: "其他"}],
type: 0
},
{name: "其他"}],
type: 1
},
{
name: "江苏",
sub: [{name: "请选择", sub: [{name:''}]},
{
name: "南京",
sub: [{name: "请选择"}, {name: "玄武区"}, {name: "白下区"}, {name: "秦淮区"}, {name: "建邺区"}, {name: "鼓楼区"}, {name: "下关区"}, {name: "栖霞区"}, {name: "雨花台区"}, {name: "浦口区"}, {name: "江宁区"}, {name: "六合区"}, {name: "溧水县"}, {name: "高淳县"}, {name: "其他"}],
type: 0
},
{
name: "苏州",
sub: [{name: "请选择"}, {name: "金阊区"}, {name: "平江区"}, {name: "沧浪区"}, {name: "虎丘区"}, {name: "吴中区"}, {name: "相城区"}, {name: "常熟市"}, {name: "张家港市"}, {name: "昆山市"}, {name: "吴江市"}, {name: "太仓市"}, {name: "其他"}],
type: 0
},
{
name: "无锡",
sub: [{name: "请选择"}, {name: "崇安区"}, {name: "南长区"}, {name: "北塘区"}, {name: "滨湖区"}, {name: "锡山区"}, {name: "惠山区"}, {name: "江阴市"}, {name: "宜兴市"}, {name: "其他"}],
type: 0
},
{
name: "常州",
sub: [{name: "请选择"}, {name: "钟楼区"}, {name: "天宁区"}, {name: "戚墅堰区"}, {name: "新北区"}, {name: "武进区"}, {name: "金坛市"}, {name: "溧阳市"}, {name: "其他"}],
type: 0
},
{
name: "镇江",
sub: [{name: "请选择"}, {name: "京口区"}, {name: "润州区"}, {name: "丹徒区"}, {name: "丹阳市"}, {name: "扬中市"}, {name: "句容市"}, {name: "其他"}],
type: 0
},
{
name: "南通",
sub: [{name: "请选择"}, {name: "崇川区"}, {name: "港闸区"}, {name: "通州市"}, {name: "如皋市"}, {name: "海门市"}, {name: "启东市"}, {name: "海安县"}, {name: "如东县"}, {name: "其他"}],
type: 0
},
{
name: "泰州",
sub: [{name: "请选择"}, {name: "海陵区"}, {name: "高港区"}, {name: "姜堰市"}, {name: "泰兴市"}, {name: "靖江市"}, {name: "兴化市"}, {name: "其他"}],
type: 0
},
{
name: "扬州",
sub: [{name: "请选择"}, {name: "广陵区"}, {name: "维扬区"}, {name: "邗江区"}, {name: "江都市"}, {name: "仪征市"}, {name: "高邮市"}, {name: "宝应县"}, {name: "其他"}],
type: 0
},
{
name: "盐城",
sub: [{name: "请选择"}, {name: "亭湖区"}, {name: "盐都区"}, {name: "大丰市"}, {name: "东台市"}, {name: "建湖县"}, {name: "射阳县"}, {name: "阜宁县"}, {name: "滨海县"}, {name: "响水县"}, {name: "其他"}],
type: 0
},
{
name: "连云港",
sub: [{name: "请选择"}, {name: "新浦区"}, {name: "海州区"}, {name: "连云区"}, {name: "东海县"}, {name: "灌云县"}, {name: "赣榆县"}, {name: "灌南县"}, {name: "其他"}],
type: 0
},
{
name: "徐州",
sub: [{name: "请选择"}, {name: "云龙区"}, {name: "鼓楼区"}, {name: "九里区"}, {name: "泉山区"}, {name: "贾汪区"}, {name: "邳州市"}, {name: "新沂市"}, {name: "铜山县"}, {name: "睢宁县"}, {name: "沛县"}, {name: "丰县"}, {name: "其他"}],
type: 0
},
{
name: "淮安",
sub: [{name: "请选择"}, {name: "清河区"}, {name: "清浦区"}, {name: "楚州区"}, {name: "淮阴区"}, {name: "涟水县"}, {name: "洪泽县"}, {name: "金湖县"}, {name: "盱眙县"}, {name: "其他"}],
type: 0
},
{
name: "宿迁",
sub: [{name: "请选择"}, {name: "宿城区"}, {name: "宿豫区"}, {name: "沭阳县"}, {name: "泗阳县"}, {name: "泗洪县"}, {name: "其他"}],
type: 0
},
{name: "其他"}],
type: 1
},
{
name: "湖北",
sub: [{name: "请选择", sub: [{name:''}]},
{
name: "武汉",
sub: [{name: "请选择"}, {name: "江岸区"}, {name: "武昌区"}, {name: "江汉区"}, {name: "硚口区"}, {name: "汉阳区"}, {name: "青山区"}, {name: "洪山区"}, {name: "东西湖区"}, {name: "汉南区"}, {name: "蔡甸区"}, {name: "江夏区"}, {name: "黄陂区"}, {name: "新洲区"}, {name: "其他"}],
type: 0
},
{
name: "黄石",
sub: [{name: "请选择"}, {name: "黄石港区"}, {name: "西塞山区"}, {name: "下陆区"}, {name: "铁山区"}, {name: "大冶市"}, {name: "阳新县"}, {name: "其他"}],
type: 0
},
{
name: "十堰",
sub: [{name: "请选择"}, {name: "张湾区"}, {name: "茅箭区"}, {name: "丹江口市"}, {name: "郧县"}, {name: "竹山县"}, {name: "房县"}, {name: "郧西县"}, {name: "竹溪县"}, {name: "其他"}],
type: 0
},
{
name: "荆州",
sub: [{name: "请选择"}, {name: "沙市区"}, {name: "荆州区"}, {name: "洪湖市"}, {name: "石首市"}, {name: "松滋市"}, {name: "监利县"}, {name: "公安县"}, {name: "江陵县"}, {name: "其他"}],
type: 0
},
{
name: "宜昌",
sub: [{name: "请选择"}, {name: "西陵区"}, {name: "伍家岗区"}, {name: "点军区
最低0.47元/天 解锁文章
2654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
