城市三级联动

 省：<select id="provice">
			<option>--请选择--</option>
		</select> 
 市：<select id="city">
			<option>--请选择--</option>
		</select> 
 区：<select id="area">
			<option>--请选择--</option>
		</select>

var provice = document.getElementById("provice");
        var city1 = document.getElementById("city");
        var area = document.getElementById("area");
        console.log(area)
        console.log(city1)
        var children;
        var children2;
        var data = city[0];
        console.log(data)
        for (var i in data) {
            //				provice.innerHTML += "<option></option>"
            //				var option = document.createElement("option");
            //				option.innerHTML = data[i].name;
            //				option.setAttribute("value",i)
            
            var option = new Option(data[i].name, i); //实例化，data[i].name为文本值，i为value值
            provice.appendChild(option)
                // console.log(data[i].name);
        }
        provice.onchange = function() {
        //城市选择的长度变为1个 每次点击清空 (避免如果点击河北省石家庄然后再点击唐山市会出现叠加的问题)
            city1.options.length = 1; 
            //把当前省份的值提取出来(点击当前身份获取当前省份的市)
            var int1 = this.value; 
            children = data[int1].child; //把市拿出来
            for (var j in children) {
                var cityoption = new Option(children[j].name, j);
                city1.appendChild(cityoption);
                console.log(cityoption)
            }
            console.log(data[int1].child)
        }
        city1.onchange = function() {
            area.options.length = 1;
            var int2 = this.value;
            console.log(int2)
            children2 = children[int2].child;
            console.log(children2)
            for (var k in children2) {
                var cityoption2 = new Option(children2[k], k);
                area.appendChild(cityoption2)
                console.log(cityoption2)
            }

        }