三级联动

最新推荐文章于 2022-06-24 11:44:16 发布

werch

最新推荐文章于 2022-06-24 11:44:16 发布

阅读量73

点赞数

分类专栏： js js 小案例

本文链接：https://blog.csdn.net/weixin_42666092/article/details/115459712

版权

js 同时被 2 个专栏收录

54 篇文章 1 订阅

订阅专栏

js 小案例

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>三级联动</title>
    <style type="text/css">
        select {
            width: 120px;
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <select id="sheng"></select>省
    <select id="shi"></select>市
    <select id="xian"></select>县
</body>

</html>
<script type="text/javascript">
    var aPro = ['河南省', '河北省'];
    var aCity = [['郑州市', '开封市'], ['石家庄', '邯郸市']];
    //aCon[0][0]
    var aCon = [
        [
            ['二七区', '金水区', '高新区', '中原区'],
            ['开封县', '兰考县', '尉氏县', '杞县']
        ],
        [['石家庄1区', '石家庄2区', '石家庄3区', '石家庄4区'],
        ['邯郸1县', '邯郸2县', '邯郸3县', '邯郸4县', '邯郸5县']
        ]
    ];

    var sheng = document.getElementById("sheng");
    var shi = document.getElementById("shi");
    var xian = document.getElementById("xian");

    //设置省的下标
    var proIndex = 0;
    //设置市的下标
    var cityIndex = 0;

    //给省添加选项
    for (var i = 0; i < aPro.length; i++) {
        var opt = document.createElement('option');
        opt.innerHTML = aPro[i];
        sheng.appendChild(opt);
    }

    //给市添加可选项
    function changeCity() {
        //清空里面的内容，因为之前可能会有其他内容
        shi.innerHTML = '';
        //创建对应的城市选项
        for (var i = 0; i < aCity[proIndex].length; i++) {
            var opt = document.createElement('option');
            opt.innerHTML = aCity[proIndex][i];
            shi.appendChild(opt);
        }
    }
    changeCity();

    //给县添加可选项
    function changeCon() {
        //清空里面的内容，因为之前可能会有其他内容
        xian.innerHTML = '';
        //创建对应的县选项
        for (var i = 0; i < aCon[proIndex][cityIndex].length; i++) {
            var opt = document.createElement('option');
            opt.innerHTML = aCon[proIndex][cityIndex][i];
            xian.appendChild(opt);
        }
    }
    changeCon();

    //给省添加change事件,内容改变的时候触发
    sheng.onchange = function () {
        // alert(this.value);
        var val = this.value;
        if (val == '河南省') {
            proIndex = 0;
        } else {
            proIndex = 1;
        }
        changeCity();
        changeCon();
    };
    //给市添加change事件
    shi.onchange = function () {
        var val = this.value;
        //获取市的下标
        cityIndex = aCity[proIndex].indexOf(val);
        changeCon();
    };
</script>