web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站

js原生三级省市县联动

632 ℃
           
//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://ipkd.cn/webs_76.html

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

当前位置: 网站首页 > js
本文共计1424个字,预计阅读时长10分钟
生活小工具,收录了80多款小工具
上一篇: WordPress用自定义代码实现更高级的分页功能
下一篇: 车牌号输入HTML模板下载
x 打工人ai神器