运用极简行代码实现省市二级联动【json动态数据版】

本文主要是介绍运用极简行代码实现省市二级联动【json动态数据版】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

运用极简行代码实现省市二级联动【json动态数据版】

map.json
数据来自：全国省市区县json数据

map.html
请查看：运用极简行代码实现省市二级联动【固定数据版】

map.js

var arr = [] //存数据$(function() {$.ajax({ // 获取json数据url: 'map/map.json', // 本地json文件dataType: 'json',success: function(res) {let _pro = document.getElementById("pro")for (let i in res) { // 成功获取数据后,遍历省份_pro.add(new Option(res[i].name, i), null)}for (let i in res) {arr.push(res[i])}},error(err) {console.log(err)}})
})function initCity() { // 获取数据后,遍历城市let idx = document.getElementById("pro").value;let _city = document.getElementById("city");_city.length = 1;for (var i in arr[idx].city) {_city.add(new Option(arr[idx].city[i].name, i), null)}
}

目录结构

还没满足您的需求？更多请了解：
运用极简行代码实现省市区三级联动【固定数据版】

这篇关于运用极简行代码实现省市二级联动【json动态数据版】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---