四级联动的一种写法

Html

Css

选择省份：

label ｛
	display:inline-block;
	width:100px;
	text-align:right;
	margin-right:10px;
｝
select ｛
	padding:5px;
	font-size:16px;
	border:1px solid #ccc;
	border-radius:5px;
	width:200px;
	margin-bottom:10px;
｝

// 省份、城市、县区、街道数据
var data = {
    "北京市": {
        "市辖区": {
            "东城区": ["东华门街道", "景山街道", "交道口街道", "安定门街道"],
            "西城区": ["西长安街街道", "新街口街道", "广安门内街道", "月坛街道"],
            // 其他城区数据
        },
        // 其他市辖市数据
    },
    // 其他省份数据
};

// 选择省份后更新城市选项
function updateCity() {
    var province = document.getElementById("province").value;
    var citySelect = document.getElementById("city");
    citySelect.innerHTML = "";
    var districtSelect = document.getElementById("district");
    districtSelect.innerHTML = "";
    var streetSelect = document.getElementById("street");
    streetSelect.innerHTML = "";
    if (province == "") {
        return;
    }
    var cities = data[province];
    for (var city in cities) {
        var option = document.createElement("option");
        option.value = city;
        option.innerHTML = city;
        citySelect.appendChild(option);
    }
    updateDistrict();
}

// 选择城市后更新县区选项
function updateDistrict() {
    var province = document.getElementById("province").value;
    var city = document.getElementById("city").value;
    var districtSelect = document.getElementById("district");
    districtSelect.innerHTML = "";
    var streetSelect = document.getElementById("street");
    streetSelect.innerHTML = "";
    if (province == "" || city == "") {
        return;
    }
    var districts = data[province][city];
    for (var district in districts) {
        var option = document.createElement("option");
        option.value = district;
        option.innerHTML = district;
        districtSelect.appendChild(option);
    }
    updateStreet();
}

// 选择县区后更新街道选项
function updateStreet() {
    var province = document.getElementById("province").value;
    var city = document.getElementById("city").value;
    var district = document.getElementById("district").value;
    var streetSelect = document.getElementById("street");
    streetSelect.innerHTML = "";
    if (province == "" || city == "" || district == "") {
        return;
    }
    var streets = data[province][city][district];
    for (var i = 0; i < streets.length; i++) {
        var option = document.createElement("option");
        option.value = streets[i];
        option.innerHTML = streets[i];
        streetSelect.appendChild(option);
    }
}

// 监听省份选项变化事件
document.getElementById("province").addEventListener("change", updateCity);

// 监听城市选项变化事件
document.getElementById("city").addEventListener("change", updateDistrict);

// 监听县区选项变化事件
document.getElementById("district").addEventListener("change", updateStreet);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

四级联动的一种写法



代码描述：省市区的四级联动简单写法

更新时间：2023-05-11 00:23:28
内容可以自己填充，这是一个简单的四级联动选择地址，也可以做成其它的样式。

1

最新

发表评论全部评论

暂时没有评论！

iexn0

2023/8/28 11:39:18

不实用哦回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

administrators123

相关代码

四级联动的一种写法

最新