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

TurtleOrange

于 2020-12-18 11:05:26 发布

阅读量369

点赞数

CC 4.0 BY-SA版权

分类专栏：分享实践前端文章标签： javascript jquery html5

本文链接：https://blog.youkuaiyun.com/TurtleOrange/article/details/111354800

分享同时被 3 个专栏收录

40 篇文章

订阅专栏

实践

30 篇文章

订阅专栏

前端

30 篇文章

订阅专栏

博客介绍了运用极简代码实现省市二级联动（固定数据版），包含固定数据添加位置，给出了map.html和map.js的Jquery、JavaScript写法，还提及了省市二级联动（json动态数据版）及省市区三级联动（固定数据版）。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

在这里插入图片描述
固定数据(加到map.js开头)

var area =[
    {
        "proName":"广东",
        "cityName":['潮州','东莞','佛山','广州','河源','惠州','江门','揭阳','茂名','梅州','清远','汕头','汕尾','韶关','深圳','阳江','云浮','湛江','肇庆','中山','珠海'],
    }, {
        "proName":"广西",
        "cityName":['百色','北海','崇左','防城港','贵港','桂林','河池','贺州','来宾','柳州','南宁','钦州','梧州','玉林'],
    },  {
        "proName":"云南",
        "cityName":['楚雄','大理','德宏','迪庆','红河','昆明','丽江','临沧','怒江','普洱','曲靖','瑞丽','文山','西双版纳','玉溪','昭通'],
    }, {
        "proName":"海南",
        "cityName":['白沙','保亭','昌江','澄迈','儋州','定安','东方','海口','乐东','临高','陵水','琼海','琼中','三亚','屯昌','万宁','文昌','五指山']
    }
]

map.html

<head>
	<!-- 样式 -->
    <style>
        body { background: #eee; }
        select { width: 100px;outline: none; }
    </style>
</head>
<body>
    <div>
        <select id="pro" onchange="initCity()">
            <option style="display:none">请选择省份</option>
        </select>
        <select id="city">
            <option style="display:none">请选择市区</option>
        </select>
    </div>
</body>

map.js(方法1：Jquery写法)

$(function() {
    initPro() //先加载省份
})

function initPro() {
    let _pro = $("#pro")
    for (let i = 0; i < area.length; i++) {
        _pro.append($("<option></option>").val(i).html(area[i].proName))
    }
}

function initCity() {
    var idx = $("#pro").val()
    let _city = $("#city")
    _city.prop("length", 1) // prop设置属性和值，清空city队列，1为显示默认文本
    for (var i = 0; i < area[idx].cityName.length; i++) {
        _city.append($("<option></option>").val(i+1).html(area[idx].cityName[i]))
    }
}

map.js(方法2：JavaScript写法)

window.onload = function() {
    initPro() //先加载省份
}

function initPro() {
    let _pro = document.getElementById("pro")
    for (let i in area) {
        _pro.add(new Option(area[i].proName, i), null)
    }
}

function initCity() {
    let idx = document.getElementById("pro").value;
    let _city = document.getElementById("city");
    _city.length = 1; // 每次都先清空city
    for (var i in area[idx].cityName) {
        _city.add(new Option(area[idx].cityName[i], i), null)
    }
}