js实现二级联动

完整版的代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级联动</title>
</head>

<body>
    <select name="" id="provioce">
    </select>
    <select name="" id="city">
    </select>
    <!-- 
        如何实现联动效果
     -->
    <script src="./area.js"></script>

    <script>
        // 如何实现联动效果
        var provioce = document.querySelector('#provioce')
        var city = document.querySelector('#city')
        ranopt('#provioce', area)
        // 初始化市
        // 1: 获取当前选中的省 
        // 2: 根据当前的省获取市数据
        var provice_init = filterOptioned(provioce)
        // 3: 将拿到的市数据渲染到页面上
        ranopt('#city', area[provice_init][0])
        // 当用户选择的省发生变化时市也随着联动
        provioce.addEventListener('change', function () {
            var provice_init = filterOptioned(provioce)
            console.log(1);
            ranopt('#city', area[provice_init][0])
        })
        // 封装渲染页面函数
        function ranopt(str, data) {
            var select = document.querySelector(str)
            select.innerHTML = ''
            for (const key in data) {
                var option = document.createElement('option')
                option.innerHTML = key
                select.appendChild(option)
            }
        }
        // 过滤某个select 选中了哪一个option的value
        function filterOptioned(selet) {
            // selet.innerHTML = ''
            for (let i = 0; i < selet.options.length; i++) {
                // selected option参数 选中为true 没选中 false
                if (selet.options[i].selected) {
                    //返回option元素的value
                    return provioce.options[i].value
                }
            }

        }
    </script>
</body>

</html>
posted @ 2022-04-19 12:30  菜鸟解析  阅读(411)  评论(0)    收藏  举报