封装函数实现三级联动的实现

weixin_52412707

于 2022-04-20 21:52:27 发布

阅读量91

点赞数

本文链接：https://blog.csdn.net/weixin_52412707/article/details/124308520

版权

javascript

完整版的代码如下:

<!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="province"></select>
    <select name="" id="city"></select>
    <select name="" id="district"></select>
    <script src="./area.js"></script>
    <script>
        /*
        renderOpt()
        作用: 根据数据, 给某个select 渲染option
        参一: select元素 类型elementObject
        参二: 数据 obj
        返回值: 无
        */
        function renderOpt(select, data) {
            select.innerHTML = ' ';  // 先清空select
            if (data.constructor === Object) {
                for (var k in data) {  // 添加option
                    var option = document.createElement('option') // 创建一个option
                    option.innerHTML = k  //给option添加文本内容
                    option.value = k  // 给option添加value
                    select.appendChild(option) // 将创建option添加到 select上
                }
            } else if (Array.isArray(data)) {
                for (var i in data) {
                    data[i]
                    for (var k in data[i]) {
                        var option = document.createElement('option')
                        option.innerHTML = k
                        option.value = k
                        select.appendChild(option)
                    }
                }
            }

        }

        /*
        filterOptSelected()
        作用: 过滤某个select中选中的option
        参一: select元素  类型  elementObject
        返回值: 选中的option元素  类型: elementObject
        */
        function filterOptSelected(select) {
            //    var opts = document.querySelectorAll('select>option')
            var opts = select.options   // 获取select元素中所有的option集合
            for (let i = 0; i < opts.length; i++) {  // 遍历option, 为了检查每个option
                var isSelected = opts[i].selected  // 获取option值, true 选中   false  没选中
                if (isSelected) {   // 当前被选中的option
                    return opts[i]  // 将选中的option元素 输出到函数外部
                }
            }
        }
        var province_dom = document.querySelector('#province')
        // 第一步: 初始化
        // 1.1 初始化省数据渲染
        renderOpt(province_dom, area)

        // 1.2 初始化市
        // 1.2.1 获取当前选中的是哪个省
        var pro_opt = filterOptSelected(province_dom)
        console.log(pro_opt);
        console.log(pro_opt.value);
        // 1.2.2 根据省获取渲染市的数据
        var city_data = area[pro_opt.value][0]
        console.log(city_data);
        // 1.2.3 根据市数据渲染市
        var city_dom = document.querySelector('#city')
        renderOpt(city_dom, city_data)


        // 1.3 初始化区
        // 1.3.1 获取当前选中的是哪个市
        var city_opt = filterOptSelected(city_dom)
        console.log(city_opt);
        console.log(city_opt.value);
        // 1.3.2 根据市获取渲染区的数据

        var district_data = city_data[city_opt.value]
        console.log(district_data);
        // 1.3.3 根据区数据渲染区
        var district_dom = document.querySelector('#district')
        // ???
        renderOpt(district_dom, district_data)

        // 第二步: 当用户更新, 省或者市

        // 2.1 监听用户是否更换了省
        province_dom.addEventListener('change', function () {
            // 2.1.1 获取更新后的option
            var pro_opt = filterOptSelected(province_dom)
            // 2.1.2 根据选择的省更新市数据
             city_data = area[pro_opt.value][0]
            console.log(city_data);
            // 2.1.3 根据市数据更新市
            renderOpt(city_dom, city_data)
            // 2.1.4 获取当前更新的市, 得到获取区数据的索引
            var city_opt = filterOptSelected(city_dom)
            console.log(city_opt.value);
            // 2.1.5 根据市索引获取区数据
             district_data = city_data[city_opt.value]
            console.log(district_data);
            // 2.1.6 根据区数据, 渲染区
            renderOpt(district_dom, district_data)
        })

        city_dom.addEventListener('change', function () {
            // var pro_opt = filterOptSelected(province_dom)
            // var city_data = area[pro_opt.value][0]
            var city_opt = filterOptSelected(city_dom)
            var district_data = city_data[city_opt.value]
            renderOpt(district_dom, district_data)
        })
    </script>
</body>

</html>

weixin_52412707

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
封装函数实现三级联动的实现

完整版的代码如下:<!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"> <t
复制链接

扫一扫