三级联动效果

最新推荐文章于 2019-05-09 11:45:00 发布

Kk-87

最新推荐文章于 2019-05-09 11:45:00 发布

阅读量248

点赞数

分类专栏： js 文章标签： javascript 下拉框函数数组联动

本文链接：https://blog.csdn.net/qq_36712191/article/details/66137959

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这里只是提供一个思路,具体看代码,这里将动态生成option列表封装成函数, 方便复用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动案例</title>
</head>
<body>
<form action="" method=get>
    <select name="" id="pre" οnchange='chg(this)'>
        <option value="-1">请选择省份</option>
    </select>
    <select name="" id="city" οnchange='chg2(this)'>
        <option value="" selected>请选择城市</option>
    </select>
    <select name="" id="area">
        <option value="" selected>区/县</option>
    </select>
</form>
</body>
<script>
    var pres = ["北京", "上海", "山东"];
    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');

    //    遍历省份
    generateOption(pres, preEle);

    //    省级下拉框改变触发事件
    function chg(obj) {
//        如果等于默认option,清空后二级
        if (obj.value == -1) {
            cityEle.options.length = 0;
            areaEle.options.length = 0;
        }

        var val = obj.value;
        pIndex = obj.value;
//        城市列表
        var cs = cities[val];
//        区县列表
        var as = areas[val][0];
        cityEle.options.length = 0;
        areaEle.options.length = 0;
        generateOption(cs, cityEle);
        generateOption(as, areaEle);
    }

    //    市级下拉框改变触发事件
    function chg2(obj) {
//        返回下拉列表中被选选项的索引号
        var val = obj.selectedIndex;
        var as = areas[pIndex][val];
        areaEle.options.length = 0;
        generateOption(as, areaEle);
    }
    
    /*
     动态生成option
     {arr: Array} 获取dee数组
     {oldArr: element} 要动态添加的元素
     */
    function generateOption(arr, oldArr) {
        arr.forEach(function (val, i) {
            var op = new Option(arr[i], i);
            oldArr.options.add(op)
        })
    }
</script>
</html>

Kk-87

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三级联动效果

这里只是提供一个思路,具体看代码,这里将动态生成option列表封装成函数, 方便复用:html>html lang="en">head> meta charset="UTF-8"> title>三级联动案例title>head>body>form action="" method=get> select name="" id="pre" onchange='
复制链接

扫一扫