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));
        }
    }
}

jquery利用select实现多级联动（省市县）

layui做城市三级联动代码介绍

远离javascript/jquery纯css3实现多级导航栏联动

纯js实现二级联动代码

vuejs实现全站联动

标签： 多级联动

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

当前网址：https://m.ipkd.cn/webs_76.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！