js实现三级联动

最新推荐文章于 2021-06-04 02:04:05 发布

cgt_0812

最新推荐文章于 2021-06-04 02:04:05 发布

阅读量296

点赞数

本文链接：https://blog.csdn.net/cgt_0812/article/details/52248752

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
省：
<select style="width: 100px;" id="pre" onchange="change(this);">
    <option value="-1">请选择</option>
</select>
市：
<select style="width: 100px;" id="city" onchange="change1(this)" ;></select>
区：
<select style="width: 100px;" id="area"></select>
</body>
<script>
    //声明省
    var pres = ["北京", "浙江", "河南"]; //直接声明Array
    //声明市
    var cities = [
        ["东城", "昌平", "海淀"],
        ["杭州", "温州"],
        ["郑州", "周口"]
    ];

    var areas = [
        [
            ["东城1", "东城2", "东城3"],
            ["昌平1", "昌平2", "昌平3"],
            ["海淀1", "海淀2", "海淀3"]
        ],
        [
            ["杭州1", "杭州2", "杭州3"],
            ["温州1", "温州2", "温州3"]
        ],
        [
            ["郑州1", "郑州2"],
            ["周口1", "周口2"]
        ]
    ]
    //设置一个省的公共下标
    var pIndex = -1;

    var preEle = document.getElementById("pre");
    var cityEle = document.getElementById("city");
    var areaEle = document.getElementById("area");

    //先设置省的值
    for (var i = 0; i < pres.length; i++) {
        //声明option.<option value="pres[i]">Pres[i]</option>
        var op = new Option(pres[i], i);
        //添加
        preEle.options.add(op);
    }

    function change(obj) {

        if (obj.value == -1) {

            cityEle.options.length = 0;
            areaEle.options.length = 0;
        }
        //获取值
        var val = obj.value;
        pIndex = obj.value;
        //获取ctiry
        var cs = cities[val];
        //获取默认区
        var as = areas[val][0];

        //先清空市
        cityEle.options.length = 0;
        areaEle.options.length = 0;


        for (var i = 0; i < cs.length; i++) {
            var op = new Option(cs[i], i);
            cityEle.options.add(op);
        }

        for (var i = 0; i < as.length; i++) {

            var op = new Option(as[i], i);

            areaEle.options.add(op);
        }
    }

    function change1(obj) {

        var val = obj.selectedIndex;

        var as = areas[pIndex][val];


        areaEle.options.length = 0;
        for (var i = 0; i < as.length; i++) {

            var op = new Option(as[i], i);

            areaEle.options.add(op);
        }
    }
</script>
</html>

cgt_0812

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现三级联动

html>html>head> meta charset="utf-8"> title>title>head>body>省：select style="width: 100px;" id="pre" onchange="change(this);"> option value="-1">请选择option>select>市：select style="w
复制链接

扫一扫