原生js select联级

最新推荐文章于 2024-06-27 20:13:46 发布

balabala—慧

最新推荐文章于 2024-06-27 20:13:46 发布

阅读量868

点赞数 1

CC 4.0 BY-SA版权

分类专栏：原生文章标签：省市联动

本文链接：https://blog.youkuaiyun.com/balabala_1001/article/details/93055611

原生专栏收录该内容

1 篇文章

订阅专栏

博客介绍了 js select 二级联级的相关内容，显示全部时右边不出现，点击筛选条件右边会出现相应字段，还给出了全部代码及参考地址。

js select 二级联级

显示全部时，右边不出现

全部显示时

点击筛选的条件时，右边出现相应的字段

在这里插入图片描述
全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            display: flex;
            justify-content: space-between;
        }
        .per-text{
            margin-right: 10px;
        }
        .per-name{
            width: 40%;
            margin-left: 10px;
        }
        .per-name2{
            opacity: 0;
        }
        #selector1,#selector2{
            width: 80%;
            height: 35px;
            border: 1px solid #ccc;
            border-radius: 5px;
            text-indent: 10px;
            -webkit-appearance: none;
            background: url(img/youjtou.png) no-repeat;
            background-position: 95% 15px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="per-name">
            <label class="per-text">筛选&nbsp;&nbsp;:</label>
            <select name="selector1" id="selector1">
                <option value="">全部</option>
                <option value="地点">地点</option>
                <option value="主题">主题</option>
                <option value="时间">时间</option>
                <option value="状态">状态</option>
            </select>
        </div>
        <div class="per-name per-name2" >
            <label class="per-text" id="per-text"></label>
            <select name="selector2" id="selector2"></select>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    var stateSelect = document.getElementById('selector1');
    var selects = document.getElementById('selector2');
    var perName = document.getElementsByClassName('per-name2')[0];
    var perText = document.getElementById('per-text');

    var items = {
        '地点': ['西安市', '宝鸡市'],
        '主题': ['汉语言文化', '旅游', '美食'],
        '时间': ['2019-05', '2019-04', '2019-03'],
        '状态': ['未授权', '已授权']
    };
    stateSelect.addEventListener('change', function(e) {
        selects.options.length = 0;
        if (stateSelect.selectedIndex) {
            perName.style.cssText = "opacity:1";
            perText.innerHTML = stateSelect.value +'&nbsp;&nbsp;:';

            var itemArr = items[stateSelect.value];
            for (var i = 0; i < itemArr.length; i++) {
                selects.add(new Option(itemArr[i]));
            }
        }else{
            perName.style.cssText = "opacity:0";
        }
    });
</script>

参考地址：https://codepen.io/levonlin/pen/YqGZEa/