当我们需要在前端实现省市区三级联动时，通常采用JavaScript来完成。下面是一份简单的省市区三级联动代码：

<!--HTML部分-->
<select id="province"></select>
<select id="city"></select>
<select id="area"></select>

//JS部分
var province = document.getElementById("province");
var city = document.getElementById("city");
var area = document.getElementById("area");

var provinces = ["省份1", "省份2", "省份3"]; //省份数据
var cities = { //城市数据
    省份1: ["城市1-1", "城市1-2", "城市1-3"],
    省份2: ["城市2-1", "城市2-2", "城市2-3"],
    省份3: ["城市3-1", "城市3-2", "城市3-3"]
};
var areas = { //区县数据
    城市1-1: ["区县1-1-1", "区县1-1-2", "区县1-1-3"],
    城市1-2: ["区县1-2-1", "区县1-2-2", "区县1-2-3"],
    城市1-3: ["区县1-3-1", "区县1-3-2", "区县1-3-3"],
    城市2-1: ["区县2-1-1", "区县2-1-2", "区县2-1-3"],
    城市2-2: ["区县2-2-1", "区县2-2-2", "区县2-2-3"],
    城市2-3: ["区县2-3-1", "区县2-3-2", "区县2-3-3"],
    城市3-1: ["区县3-1-1", "区县3-1-2", "区县3-1-3"],
    城市3-2: ["区县3-2-1", "区县3-2-2", "区县3-2-3"],
    城市3-3: ["区县3-3-1", "区县3-3-2", "区县3-3-3"]
};

//初始化省份
for (var i = 0; i < provinces.length; i++) {
    var option = document.createElement("option");
    option.innerHTML = provinces[i];
    province.appendChild(option);
}

//根据选择的省份更新城市列表
province.onchange = function() {
    city.innerHTML = "";
    area.innerHTML = "";
    var selectedProvince = this.value;
    var citiesOfSelectedProvince = cities[selectedProvince];
    for (var i = 0; i < citiesOfSelectedProvince.length; i++) {
        var option = document.createElement("option");
        option.innerHTML = citiesOfSelectedProvince[i];
        city.appendChild(option);
    }
}

//根据选择的城市更新区县列表
city.onchange = function() {
    area.innerHTML = "";
    var selectedCity = this.value;
    var areasOfSelectedCity = areas[selectedCity];
    for (var i = 0; i < areasOfSelectedCity.length; i++) {
        var option = document.createElement("option");
        option.innerHTML = areasOfSelectedCity[i];
        area.appendChild(option);
    }
}

这份代码通过监听省份、城市选择框的onchange事件，根据当前选择的省份或城市更新下一级对应的城市或区县列表。其中，省份、城市、区县数据可以根据实际需要进行替换。

需要注意的是，这份代码只是一个简单的实现，如果需要更复杂的三级联动，可能需要借助第三方库或者更加完整的数据源。

本文链接：http://task.lmcjl.com/news/13133.html