开发工具-intellij IDEA需求

1.实现对json文件的读取。

2.可以在省级选择所有省名和直辖市名

3.选择一级省名后自动刷新市名

4.选择二级市名后自动刷新区名

逻辑分析

第一步：读取json文件

第二步：遍历出所有一级的省名

第三步：把遍历出来的省名动态追加到select标签下

第四步：给一级省名注册change事件

第五步：点击省名后获取省的id值

第六步：确定点击的对象数据

第七步：做判断，如果直辖市的话下面就是直接显示区名，如果不是就显示市名

第八步：遍历出这个对象的地区名数据

第九步：动态追加数据

第十步：重复上步骤，完成三级追加

具体实现

页面准备

html：

<div class="container text-center"> <h3>选择所属城市</h3> <br> <br> <div class="row"> <div class="col-md-1 text-right pronciy">省:</div> <div class="col-md-3"> <select class="form-control" id="pro"> </select> </div> <div class="col-md-1 text-right pronciy">市:</div> <div class="col-md-3"> <select class="form-control" id="area"> </select> </div> <div class="col-md-1 text-right pronciy">区:</div> <div class="col-md-3"> <select class="form-control" id="qu"> </select> </div> </div></div>

css

<style> * { font-size: 14px; } .row .pronciy { width: 25px; height: 34px; font-size: 18px; line-height: 34px; }</style>

{ "label": "11", "value": "北京市", "children": [ { "label": "1101", "value": "市辖区", "children": [ { "label": "110101", "value": "东城区" }, { "label": "110102", "value": "西城区" }, { "label": "110105", "value": "朝阳区" }, { "label": "110106", "value": "丰台区" }, { "label": "110107", "value": "石景山区" }, { "label": "110108", "value": "海淀区" }, { "label": "110109", "value": "门头沟区" }, { "label": "110111", "value": "房山区" }, { "label": "110112", "value": "通州区" }, { "label": "110113", "value": "顺义区" }, { "label": "110114", "value": "昌平区" }, { "label": "110115", "value": "大兴区" }, { "label": "110116", "value": "怀柔区" }, { "label": "110117", "value": "平谷区" }, { "label": "110118", "value": "密云区" }, { "label": "110119", "value": "延庆区" } ] } ]},

$(function () { $.getJSON("idcardprovince.json", function (json) {//获取json文件的数据 var data = json.data; var html = ""; var target; //定义一个目标变量 var shi; //定义市级目标变量 //省级操作 for (var i = 0; i < data.length; i++) {//第一级省级名字遍历 var lable = data[i].label; var city = data[i].value; html += "<option value='" + lable + "'>" + city + "</option>"; $("#pro").html(html); //将遍历出来的数据追加到第一级select中 } //市级操作 $("#pro").change(function () {//给第一级选择追加一个chang事件 var provinceid = $(this).val();//获得选中的省的lable值 var html = ""; for (var i = 0; i < data.length; i++) { //遍历出这个数组中的所有lable值，拿出来和点击选出的作比较 var lable = data[i].label; if (provinceid === lable) { target = data[i];//两个值相等的时候获取这个对象 这个时候target市具体的省对象 } } if (provinceid === "11" || provinceid === "12" || provinceid === "50" || provinceid === "31") { $("#area").html("<option>市辖区</option>"); for (var j = 0; j <target.children[0].children.length ; j++) { // console.log(target.children[0].children[j].value); html+="<option value='"+target.children[0].children[j].label+"'>"+target.children[0].children[j].value+"</option>" } $("#qu").html(html); }else{ for (var i = 0; i < target.children.length; i++) {//此时target为省级对象 // console.log(target.children[i].value); var label = target.children[i].label; html += "<option value='" + label + "'>" + target.children[i].value + "</option>" } $("#area").html(html); } }); //区级操作 $("#area").change(function () {//对二级行政区注册change事件 var cityLabel = $(this).val();//获取二级行政区的value值 var html = ""; for (var i = 0; i < target.children.length; i++) { console.log(target.children[i].value); var allcityLabel = target.children[i].label; if (cityLabel===allcityLabel) { shi = target.children[i]; //shi现在为市对象 break; } } for (var j = 0; j < shi.children.length; j++) { // console.log(target.children[j].value); html += "<option value='" + shi.children[j].label + "' >" + shi.children[j].value + "</option>"; // console.log(html); } $("#qu").html(html); }); });});

如需json数据文件，请私信回复json

作者：鱼伯伯不是鱼摆摆