动态联动的二级级联

被甩了一耳光的梦

于 2022-10-22 15:43:56 发布

阅读量204

点赞数

分类专栏： js 基础知识文章标签： javascript html css

本文链接：https://blog.csdn.net/onceYh/article/details/127462738

版权

基础知识同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

级联是多数情况下用于有上下级关系的场景。比如国家、城市；或者省、市；再或在连锁店、地址等等。
效果图.png
css区写法：

   <style>
        .hide{
            display: none;
        }
        .show{
            display: inline-block;
        }
    </style>

js区域的写法：

<script type="text/javascript">
    var country = ['中国', '美国','英国']
    var city = [
        ['北京', '上海', '广州','深圳'],
        ['纽约','华盛顿','洛杉矶'],
        ['伦敦']
    ];
    //获取dom
    var countrySelect = document.getElementById("country");
    var citySelect = document.getElementById("city");
    //初始化国家下拉列表
    for(var i = 0; i < country.length; i++) {
        //新的option
        var option = new Option()
        //赋值
        option.appendChild(document.createTextNode(country[i]))
        //插入
        countrySelect.appendChild(option)
    }
    //切换
    countrySelect.addEventListener('change', function(){
        //城市显示
        citySelect.className = 'show';
        //另城市列表变为初始状态，可以注释掉查看效果
        citySelect.options.length = 1;
        //如果国家选择不为默认值
        if(countrySelect.selectedIndex != 0) {
            //selectedIndex：属性可设置或返回下拉列表中被选选项的索引号
            countryIndex = countrySelect.selectedIndex - 1;
            //遍历相应国家的城市
            for (var j = 0; j < city[countryIndex].length; j++) {
                //新的option
                var cityOption = new Option()
                //赋值
                cityOption.appendChild(document.createTextNode(city[countryIndex][j]))
                //插入
                citySelect.appendChild(cityOption)
            }
        }
        else{
            //城市隐藏
            citySelect.className = 'hide';
        }
    })
</script>

html区域写法：

<body>
<select name="" id="country">
    <option selected>请选择国家</option>
</select>
<select name="" id="city" class="hide">
    <option selected>请选择城市</option>
</select>
</body>