html代码
<select name="" id="xlk1" onchange="xlk1()"> <option value=""></option> </select> <select name="" id="xlk2" onchange="xlk2()"></select> <select name="" id="xlk3"></select>js代码
var html1 = '' for (let i = 0; i < citys.length; i ) { html1 = `<option value="${i}">${citys[i].name}</option>` // console.log(citys[i].name) } document.getElementById('xlk1').innerHTML = html1 function xlk1() { let city = citys[document.getElementById('xlk1').value].city // console.log(city) document.getElementById('xlk2').innerHTML = '<option value=""></option>' document.getElementById('xlk3').innerHTML = '<option value=""></option>' let html = '' for (let i = 0; i < city.length; i ) { html = `<option value="${i}">${city[i].name}</option>` } document.getElementById('xlk2').innerHTML = html } function xlk2() { let area = citys[document.getElementById('xlk1').value].city[document.getElementById('xlk2').value].area // console.log(area) let html = '' document.getElementById('xlk3').innerHTML = '<option value=""></option>' for (let i = 0; i < area.length; i ) { html = `<option value="${i}">${area[i]}</option>` } document.getElementById('xlk3').innerHTML = html }引入的数据
创建一个city.js然后复制文件 最后把他引入页面
var citys = [ { "name": "北京市", "city": [{ "name": "北京", "area": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "平谷区", "怀柔区", "密云县", "延庆县"] }] }, { "name": "天津市", "city": [{ "name": "天津", "area": ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "宁河县", "静海县", "蓟县"] }] }, { "name": "上海市", "city": [ { "name": "上海市", "area": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹口区", "杨浦区", "宝山区", "闵行区", "嘉定区", "松江区", "金山区", "青浦区", "南汇区", "奉贤区", "浦东新区", "崇明县"] } ] }, { "name": "重庆市", "city": [ { "name": "重庆市", "area": ["渝中区", "大渡口区", "江北区", "南岸区", "北碚区", "渝北区", "巴南区", "长寿区", "双桥区", "沙坪坝区", "万盛区", "万州区", "涪陵区", "黔江区", "永川区", "合川区", "江津区", "九龙坡区", "南川区", "綦江县", "潼南县", "荣昌县", "璧山县", "大足县", "铜梁县", "梁平县", "开县", "忠县", "城口县", "垫江县", "武隆县", "丰都县", "奉节县", "云阳县", "巫溪县", "巫山县", "石柱土家族自治县", "秀山土家族苗族自治县", "酉阳土家族苗族自治县", "彭水苗族土家族自治县"] } ] }, { "name": "山东省", "city": [ {"name": "济南", "area": ["市中区", "历下区", "天桥区", "槐荫区", "历城区", "长清区", "章丘市", "平阴县", "济阳县", "商河县"]}, {"name": "青岛", "area": ["市南区", "市北区", "城阳区", "四方区", "李沧区", "黄岛区", "崂山区", "胶南市", "胶州市", "平度市", "莱西市", "即墨市"]}, {"name": "淄博", "area": ["张店区", "临淄区", "淄川区", "博山区", "周村区", "桓台县", "高青县", "沂源县"]}, {"name": "枣庄", "area": ["市中区", "山亭区", "峄城区", "台儿庄区", "薛城区", "滕州市"]}, {"name": "东营", "area": ["东营区", "河口区", "垦利县", "广饶县", "利津县"]}, {"name": "烟台", "area": ["芝罘区", "福山区", "牟平区", "莱山区", "龙口市", "莱阳市", "莱州市", "招远市", "蓬莱市", "栖霞市", "海阳市", "长岛县"]}, {"name": "潍坊", "area": ["潍城区", "寒亭区", "坊子区", "奎文区", "青州市", "诸城市", "寿光市", "安丘市", "高密市", "昌邑市", "昌乐县", "临朐县"]}, {"name": "济宁", "area": ["市中区", "任城区", "曲阜市", "兖州市", "邹城市", "鱼台县", "金乡县", "嘉祥县", "微山县", "汶上县", "泗水县", "梁山县"]}, {"name": "泰安", "area": ["泰山区", "岱岳区", "新泰市", "肥城市", "宁阳县", "东平县"]}, {"name": "威海", "area": ["环翠区", "乳山市", "文登市", "荣成市"]}, {"name": "日照", "area": ["东港区", "岚山区", "五莲县", "莒县"]}, {"name": "莱芜", "area": ["莱城区", "钢城区"]}, {"name": "临沂", "area": ["兰山区", "罗庄区", "河东区", "沂南县", "郯城县", "沂水县", "苍山县", "费县", "平邑县", "莒南县", "蒙阴县", "临沭县"]}, {"name": "德州", "area": ["德城区", "乐陵市", "禹城市", "陵县", "宁津县", "齐河县", "武城县", "庆云县", "平原县", "夏津县", "临邑县"]}, {"name": "聊城", "area": ["东昌府区", "临清市", "高唐县", "阳谷县", "茌平县", "莘县", "东阿县", "冠县"]}, {"name": "滨州", "area": ["滨城区", "邹平县", "沾化县", "惠民县", "博兴县", "阳信县", "无棣县"]}, {"name": "菏泽", "area": ["牡丹区", "鄄城县", "单县", "郓城县", "曹县", "定陶县", "巨野县", "东明县", "成武县"]} ] }, { "name": "河南省", "city": [ {"name": "郑州", "area": ["中原区", "金水区", "二七区", "管城回族区", "上街区", "惠济区", "巩义市", "新郑市", "新密市", "登封市", "荥阳市", "中牟县"]}, {"name": "开封", "area": ["鼓楼区", "龙亭区", "顺河回族区", "禹王台区", "金明区", "开封县", "尉氏县", "兰考县", "杞县", "通许县"]}, { "name": "洛阳",
"area": ["西工区", "老城区", "涧西区", "瀍河回族区", "洛龙区", "吉利区", "偃师市", "孟津县", "汝阳县", "伊川县", "洛宁县", "嵩县", "宜阳县", "新安县", "栾川县"]
},
{"name": "平顶山", "area": ["新华区", "卫东区", "湛河区", "石龙区", "汝州市", "舞钢市", "宝丰县", "叶县", "郏县", "鲁山县"]},
{"name": "安阳", "area": ["北关区", "文峰区", "殷都区", "龙安区", "林州市", "安阳县", "滑县", "内黄县", "汤阴县"]},
{"name": "鹤壁", "area": ["淇滨区", "山城区", "鹤山区", "浚县", "淇县"]},
{"name": "新乡", "area": ["卫滨区", "红旗区", "凤泉区", "牧野区", "卫辉市", "辉县市", "新乡县", "获嘉县", "原阳县", "长垣县", "封丘县", "延津县"]},
{"name": "焦作", "area": ["解放区", "中站区", "马村区", "山阳区", "沁阳市", "孟州市", "修武县", "温县", "武陟县", "博爱县"]},
{"name": "濮阳", "area": ["华龙区", "濮阳县", "南乐县", "台前县", "清丰县", "范县"]},
{"name": "许昌", "area": ["魏都区", "禹州市", "长葛市", "许昌县", "鄢陵县", "襄城县"]},
{"name": "漯河", "area": ["源汇区", "郾城区", "召陵区", "临颍县", "舞阳县"]},
{"name": "三门峡", "area": ["湖滨区", "义马市", "灵宝市", "渑池县", "卢氏县", "陕县"]},
{
"name": "南阳",
"area": ["卧龙区", "宛城区", "邓州市", "桐柏县", "方城县", "淅川县", "镇平县", "唐河县", "南召县", "内乡县", "新野县", "社旗县", "西峡县"]
},
{"name": "商丘", "area": ["梁园区", "睢阳区", "永城市", "宁陵县", "虞城县", "民权县", "夏邑县", "柘城县", "睢县"]},
{"name": "信阳", "area": ["浉河区", "平桥区", "潢川县", "淮滨县", "息县", "新县", "商城县", "固始县", "罗山县", "光山县"]},
{"name": "周口", "area": ["川汇区", "项城市", "商水县", "淮阳县", "太康县", "鹿邑县", "西华县", "扶沟县", "沈丘县", "郸城县"]},
{"name": "驻马店", "area": ["驿城区", "确山县", "新蔡县", "上蔡县", "西平县", "泌阳县", "平舆县", "汝南县", "遂平县", "正阳县"]},
{"name": "焦作", "area": ["济源市"]}
]
}
];