angular+clarity实现省、市、区/县三级联动
省市区三级联动实现效果
html
<clr-select-container>
<label>省</label>
<select clrSelect name="provice" [(ngModel)]="provice" (ngModelChange)=provicechange()>
<option *ngFor="let item of jsonData" [value]="item.name">{{item.name}}</option>
</select>
</clr-select-container>
<clr-select-container>
<label>市</label>
<select clrSelect name="shi" [(ngModel)]="shi" (ngModelChange)=citychange()>
<option *ngFor="let item of city" [value]="item.name">{{item.name}}</option>
</select>
</clr-select-container>
<clr-select-container>
<label>区/县</label>
<select clrSelect name="area" [(ngModel)]="quxian">
<option *ngFor="let item of area" [value]="item.name">{{item.name}}</option>
</select>
</clr-select-container>
注：
- 利用 *ngFor="let item of jsonData"循环遍历输出相应的option
- 利用ngModelChange监听select变化，实现联动基础
ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-information',
templateUrl: './information.component.html',
styleUrls: ['./information.component.css']
})
export class InformationComponent implements OnInit {
name:string;
sex:string;
description:string
//json文件获取的数据
jsonData:any;
//当前所在省份
provice:any;
//当前市列表
city:any;
//当前去县列表
area:any;
shi:any;
quxian:any;
constructor(
private http: HttpClient,
) { }
ngOnInit(): void {
this.getlocaldata();
}
getlocaldata() {
this.http.get("assets/jsonfile/city.json").subscribe(data => {
console.log("获取的本地json文件的数据 = ", data);
this.jsonData = data;
})
}
provicechange(){
let i,index;
for(i=0;i<this.jsonData.length;){
if(this.jsonData[i].name!=this.provice){
i++;
}else{
index = i;
break;
}
}
console.log("index="+index);
this.city = this.jsonData[index].city;
console.log(this.jsonData[index].city);
}
citychange(){
let i,index;
for(i=0;i<this.city.length;){
if(this.city[i].name!=this.shi){
i++;
}else{
index = i;
break;
}
}
console.log("citycahnge index="+index);
this.area = this.city[index].area;
console.log(this.city[index].area);
}
注：
- provicechange（）、citychange（）两个方法实现联动
- provicechange（）、citychange（）中index用来记录当前所选省或市的数组下标，为了方便的获取市或区、县数组。
- 至于为什么要用for循环，是因为在数组中的元素是对象，我不能通过对象元素找到而找到当前所选中的数组下标，因此只能用for循环遍历，判断属性值相等记录下标
- 通过下标找到相应省对应的市的数组，或相应市对应的区/县的数组
json
[
{
"name": "江苏省",
"code": "320000",
"city": [{
"name": "南京市",
"code": "320100",
"area": [{
"name": "市辖区",
"code": "320101"
},
{
"name": "玄武区",
"code": "320102"
},
{
"name": "秦淮区",
"code": "320104"
},
{
"name": "建邺区",
"code": "320105"
},
{
"name": "鼓楼区",
"code": "320106"
},
{
"name": "浦口区",
"code": "320111"
},
{
"name": "栖霞区",
"code": "320113"
},
{
"name": "雨花台区",
"code": "320114"
},
{
"name": "江宁区",
"code": "320115"
},
{
"name": "六合区",
"code": "320116"
},
{
"name": "溧水区",
"code": "320117"
},
{
"name": "高淳区",
"code": "320118"
}]
},
{
"name": "无锡市",
"code": "320200",
"area": [{
"name": "市辖区",
"code": "320201"
},
{
"name": "锡山区",
"code": "320205"
},
{
"name": "惠山区",
"code": "320206"
},
{
"name": "滨湖区",
"code": "320211"
},
{
"name": "梁溪区",
"code": "320213"
},
{
"name": "新吴区",
"code": "320214"
},
{
"name": "江阴市",
"code": "320281"
},
{
"name": "宜兴市",
"code": "320282"
}]
},
{
"name": "徐州市",
"code": "320300",
"area": [{
"name": "市辖区",
"code": "320301"
},
{
"name": "鼓楼区",
"code": "320302"
},
{
"name": "云龙区",
"code": "320303"
},
{
"name": "贾汪区",
"code": "320305"
},
{
"name": "泉山区",
"code": "320311"
},
{
"name": "铜山区",
"code": "320312"
},
{
"name": "丰县",
"code": "320321"
},
{
"name": "沛县",
"code": "320322"
},
{
"name": "睢宁县",
"code": "320324"
},
{
"name": "新沂市",
"code": "320381"
},
{
"name": "邳州市",
"code": "320382"
}]
},
{
"name": "常州市",
"code": "320400",
"area": [{
"name": "市辖区",
"code": "320401"
},
{
"name": "天宁区",
"code": "320402"
},
{
"name": "钟楼区",
"code": "320404"
},
{
"name": "新北区",
"code": "320411"
},
{
"name": "武进区",
"code": "320412"
},
{
"name": "金坛区",
"code": "320413"
},
{
"name": "溧阳市",
"code": "320481"
}]
},
{
"name": "苏州市",
"code": "320500",
"area": [{
"name": "市辖区",
"code": "320501"
},
{
"name": "虎丘区",
"code": "320505"
},
{
"name": "吴中区",
"code": "320506"
},
{
"name": "相城区",
"code": "320507"
},
{
"name": "姑苏区",
"code": "320508"
},
{
"name": "吴江区",
"code": "320509"
},
{
"name": "常熟市",
"code": "320581"
},
{
"name": "张家港市",
"code": "320582"
},
{
"name": "昆山市",
"code": "320583"
},
{
"name": "太仓市",
"code": "320585"
}]
},
{
"name": "南通市",
"code": "320600",
"area": [{
"name": "市辖区",
"code": "320601"
},
{
"name": "崇川区",
"code": "320602"
},
{
"name": "港闸区",
"code": "320611"
},
{
"name": "通州区",
"code": "320612"
},
{
"name": "海安县",
"code": "320621"
},
{
"name": "如东县",
"code": "320623"
},
{
"name": "启东市",
"code": "320681"
},
{
"name": "如皋市",
"code": "320682"
},
{
"name": "海门市",
"code": "320684"
}]
},
{
"name": "连云港市",
"code": "320700",
"area": [{
"name": "市辖区",
"code": "320701"
},
{
"name": "连云区",
"code": "320703"
},
{
"name": "海州区",
"code": "320706"
},
{
"name": "赣榆区",
"code": "320707"
},
{
"name": "东海县",
"code": "320722"
},
{
"name": "灌云县",
"code": "320723"
},
{
"name": "灌南县",
"code": "320724"
}]
},
{
"name": "淮安市",
"code": "320800",
"area": [{
"name": "市辖区",
"code": "320801"
},
{
"name": "淮安区",
"code": "320803"
},
{
"name": "淮阴区",
"code": "320804"
},
{
"name": "清江浦区",
"code": "320812"
},
{
"name": "洪泽区",
"code": "320813"
},
{
"name": "涟水县",
"code": "320826"
},
{
"name": "盱眙县",
"code": "320830"
},
{
"name": "金湖县",
"code": "320831"
}]
},
{
"name": "盐城市",
"code": "320900",
"area": [{
"name": "市辖区",
"code": "320901"
},
{
"name": "亭湖区",
"code": "320902"
},
{
"name": "盐都区",
"code": "320903"
},
{
"name": "大丰区",
"code": "320904"
},
{
"name": "响水县",
"code": "320921"
},
{
"name": "滨海县",
"code": "320922"
},
{
"name": "阜宁县",
"code": "320923"
},
{
"name": "射阳县",
"code": "320924"
},
{
"name": "建湖县",
"code": "320925"
},
{
"name": "东台市",
"code": "320981"
}]
},
{
"name": "扬州市",
"code": "321000",
"area": [{
"name": "市辖区",
"code": "321001"
},
{
"name": "广陵区",
"code": "321002"
},
{
"name": "邗江区",
"code": "321003"
},
{
"name": "江都区",
"code": "321012"
},
{
"name": "宝应县",
"code": "321023"
},
{
"name": "仪征市",
"code": "321081"
},
{
"name": "高邮市",
"code": "321084"
}]
},
{
"name": "镇江市",
"code": "321100",
"area": [{
"name": "市辖区",
"code": "321101"
},
{
"name": "京口区",
"code": "321102"
},
{
"name": "润州区",
"code": "321111"
},
{
"name": "丹徒区",
"code": "321112"
},
{
"name": "丹阳市",
"code": "321181"
},
{
"name": "扬中市",
"code": "321182"
},
{
"name": "句容市",
"code": "321183"
}]
},
{
"name": "泰州市",
"code": "321200",
"area": [{
"name": "市辖区",
"code": "321201"
},
{
"name": "海陵区",
"code": "321202"
},
{
"name": "高港区",
"code": "321203"
},
{
"name": "姜堰区",
"code": "321204"
},
{
"name": "兴化市",
"code": "321281"
},
{
"name": "靖江市",
"code": "321282"
},
{
"name": "泰兴市",
"code": "321283"
}]
},
{
"name": "宿迁市",
"code": "321300",
"area": [{
"name": "市辖区",
"code": "321301"
},
{
"name": "宿城区",
"code": "321302"
},
{
"name": "宿豫区",
"code": "321311"
},
{
"name": "沭阳县",
"code": "321322"
},
{
"name": "泗阳县",
"code": "321323"
},
{
"name": "泗洪县",
"code": "321324"
}]
}]
},{
"name": "陕西省",
"code": "610000",
"city": [{
"name": "西安市",
"code": "610100",
"area": [{
"name": "市辖区",
"code": "610101"
},
{
"name": "新城区",
"code": "610102"
},
{
"name": "碑林区",
"code": "610103"
},
{
"name": "莲湖区",
"code": "610104"
},
{
"name": "灞桥区",
"code": "610111"
},
{
"name": "未央区",
"code": "610112"
},
{
"name": "雁塔区",
"code": "610113"
},
{
"name": "阎良区",
"code": "610114"
},
{
"name": "临潼区",
"code": "610115"
},
{
"name": "长安区",
"code": "610116"
},
{
"name": "高陵区",
"code": "610117"
},
{
"name": "蓝田县",
"code": "610122"
},
{
"name": "周至县",
"code": "610124"
},
{
"name": "户县",
"code": "610125"
}]
},
{
"name": "铜川市",
"code": "610200",
"area": [{
"name": "市辖区",
"code": "610201"
},
{
"name": "王益区",
"code": "610202"
},
{
"name": "印台区",
"code": "610203"
},
{
"name": "耀州区",
"code": "610204"
},
{
"name": "宜君县",
"code": "610222"
}]
},
{
"name": "宝鸡市",
"code": "610300",
"area": [{
"name": "市辖区",
"code": "610301"
},
{
"name": "渭滨区",
"code": "610302"
},
{
"name": "金台区",
"code": "610303"
},
{
"name": "陈仓区",
"code": "610304"
},
{
"name": "凤翔县",
"code": "610322"
},
{
"name": "岐山县",
"code": "610323"
},
{
"name": "扶风县",
"code": "610324"
},
{
"name": "眉县",
"code": "610326"
},
{
"name": "陇县",
"code": "610327"
},
{
"name": "千阳县",
"code": "610328"
},
{
"name": "麟游县",
"code": "610329"
},
{
"name": "凤县",
"code": "610330"
},
{
"name": "太白县",
"code": "610331"
}]
},
{
"name": "咸阳市",
"code": "610400",
"area": [{
"name": "市辖区",
"code": "610401"
},
{
"name": "秦都区",
"code": "610402"
},
{
"name": "杨陵区",
"code": "610403"
},
{
"name": "渭城区",
"code": "610404"
},
{
"name": "三原县",
"code": "610422"
},
{
"name": "泾阳县",
"code": "610423"
},
{
"name": "乾县",
"code": "610424"
},
{
"name": "礼泉县",
"code": "610425"
},
{
"name": "永寿县",
"code": "610426"
},
{
"name": "彬县",
"code": "610427"
},
{
"name": "长武县",
"code": "610428"
},
{
"name": "旬邑县",
"code": "610429"
},
{
"name": "淳化县",
"code": "610430"
},
{
"name": "武功县",
"code": "610431"
},
{
"name": "兴平市",
"code": "610481"
}]
},
{
"name": "渭南市",
"code": "610500",
"area": [{
"name": "市辖区",
"code": "610501"
},
{
"name": "临渭区",
"code": "610502"
},
{
"name": "华州区",
"code": "610503"
},
{
"name": "潼关县",
"code": "610522"
},
{
"name": "大荔县",
"code": "610523"
},
{
"name": "合阳县",
"code": "610524"
},
{
"name": "澄城县",
"code": "610525"
},
{
"name": "蒲城县",
"code": "610526"
},
{
"name": "白水县",
"code": "610527"
},
{
"name": "富平县",
"code": "610528"
},
{
"name": "韩城市",
"code": "610581"
},
{
"name": "华阴市",
"code": "610582"
}]
},
{
"name": "延安市",
"code": "610600",
"area": [{
"name": "市辖区",
"code": "610601"
},
{
"name": "宝塔区",
"code": "610602"
},
{
"name": "安塞区",
"code": "610603"
},
{
"name": "延长县",
"code": "610621"
},
{
"name": "延川县",
"code": "610622"
},
{
"name": "子长县",
"code": "610623"
},
{
"name": "志丹县",
"code": "610625"
},
{
"name": "吴起县",
"code": "610626"
},
{
"name": "甘泉县",
"code": "610627"
},
{
"name": "富县",
"code": "610628"
},
{
"name": "洛川县",
"code": "610629"
},
{
"name": "宜川县",
"code": "610630"
},
{
"name": "黄龙县",
"code": "610631"
},
{
"name": "黄陵县",
"code": "610632"
}]
},
{
"name": "汉中市",
"code": "610700",
"area": [{
"name": "市辖区",
"code": "610701"
},
{
"name": "汉台区",
"code": "610702"
},
{
"name": "南郑县",
"code": "610721"
},
{
"name": "城固县",
"code": "610722"
},
{
"name": "洋县",
"code": "610723"
},
{
"name": "西乡县",
"code": "610724"
},
{
"name": "勉县",
"code": "610725"
},
{
"name": "宁强县",
"code": "610726"
},
{
"name": "略阳县",
"code": "610727"
},
{
"name": "镇巴县",
"code": "610728"
},
{
"name": "留坝县",
"code": "610729"
},
{
"name": "佛坪县",
"code": "610730"
}]
},
{
"name": "榆林市",
"code": "610800",
"area": [{
"name": "市辖区",
"code": "610801"
},
{
"name": "榆阳区",
"code": "610802"
},
{
"name": "横山区",
"code": "610803"
},
{
"name": "神木县",
"code": "610821"
},
{
"name": "府谷县",
"code": "610822"
},
{
"name": "靖边县",
"code": "610824"
},
{
"name": "定边县",
"code": "610825"
},
{
"name": "绥德县",
"code": "610826"
},
{
"name": "米脂县",
"code": "610827"
},
{
"name": "佳县",
"code": "610828"
},
{
"name": "吴堡县",
"code": "610829"
},
{
"name": "清涧县",
"code": "610830"
},
{
"name": "子洲县",
"code": "610831"
}]
},
{
"name": "安康市",
"code": "610900",
"area": [{
"name": "市辖区",
"code": "610901"
},
{
"name": "汉滨区",
"code": "610902"
},
{
"name": "汉阴县",
"code": "610921"
},
{
"name": "石泉县",
"code": "610922"
},
{
"name": "宁陕县",
"code": "610923"
},
{
"name": "紫阳县",
"code": "610924"
},
{
"name": "岚皋县",
"code": "610925"
},
{
"name": "平利县",
"code": "610926"
},
{
"name": "镇坪县",
"code": "610927"
},
{
"name": "旬阳县",
"code": "610928"
},
{
"name": "白河县",
"code": "610929"
}]
},
{
"name": "商洛市",
"code": "611000",
"area": [{
"name": "市辖区",
"code": "611001"
},
{
"name": "商州区",
"code": "611002"
},
{
"name": "洛南县",
"code": "611021"
},
{
"name": "丹凤县",
"code": "611022"
},
{
"name": "商南县",
"code": "611023"
},
{
"name": "山阳县",
"code": "611024"
},
{
"name": "镇安县",
"code": "611025"
},
{
"name": "柞水县",
"code": "611026"
}]
}]
}]
备注
- 有node环境
- 安装Angular CLI ，用ng -version检查angular是否安装成功
npm install -g @angular/cli - clarity参考：https://v2.clarity.design
7213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
