下面前端入门建站教程为大家介绍一下js原生三级省市县联动

//html代码
<select id="provice">
    <option>请选择省</option>
</select>
<select id="city">
    <option>请选择市</option>
</select>
<select id="county">
    <option>请选择区/县</option>
</select>

js代码
var myId = function(id) {
    return document.getElementById(id);
}
//省份
var arr_provice = ['安徽省', '福建省', '贵州省'];
//市区
var arr_city = [
    ['阜阳市'],
    ['厦门市', '晋江市'],
    ['黔西南布依族苗族自治州', '贵阳市']
]
//区县
var arr_county = [
    [
        ['太和县', '颍州区']
    ],
    [
        ['海沧区'],
        ['安海县']
    ],
    [
        ['晴隆县'],
        ['修文县']
    ]
];
//选择省份
for (var i = 0; i < arr_provice.length; i++) {
    var myProvince = arr_provice[i];
    myId("provice").appendChild(new Option(myProvince));
}
//选择相应的市区
myId("provice").onchange = function() {
    //初始化市县
    myId("city").options.length = 1;
    myId("county").options.length = 1;
    //使选择下拉框内容的index与数组的下标对应相等;
    pro_index = myId("provice").selectedIndex - 1;
    if (pro_index > -1) {
        //填入相应的市区
        for (var i = 0; i < arr_city[pro_index].length; i++) {
            var myCity = arr_city[pro_index][i];
            myId("city").appendChild(new Option(myCity));
        }
    }
}
//选择相应的区县
myId("city").onchange = function() {
    //初始化选项
    myId("county").length = 1;
    var mar_index = myId("city").selectedIndex - 1;
    if (mar_index > -1) {
        for (var i = 0; i < arr_county[pro_index][mar_index].length; i++) {
            var myCounty = arr_county[pro_index][mar_index][i];
            myId("county").appendChild(new Option(myCounty));
        }
    }
}

上面是“js原生三级省市县联动”的全面内容，想了解更多关于 js 文章，请继续关注前端入门建站教程。