select级联选择器参考原生JS实现和jQuery实现

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

qq_40178497

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

阅读量2k

点赞数 1

分类专栏：前端文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/qq_40178497/article/details/123768048

版权

前端专栏收录该内容

45 篇文章 1 订阅

订阅专栏

原生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>Document</title>
</head>

<body>
    <select id="sid">
        <option>请选择</option>
    </select>
</body>

<script type="text/javascript" async>

    // 演示数据，可换成ajax请求数据
    list = [
        { id: 1, name: 'jia' },
        { id: 2, name: 'li' }
    ]
    // 获取初始的select
    let fatherSel = document.getElementById("sid")
    // select添加option
    for (var i = 0; i < list.length; i++) {
        selectAppendOpt(fatherSel, list[i].id, list[i].name)
    }

    /**
     * 动态添加select，参数id可以不要，这里主要为演示数据不同使用
     */
    let liveAppend = (id) => {
        // 演示数据，可换成ajax请求数据
        var data = [
            { id: 1 + id, name: 'zzz' + id },
            { id: 2 + id, name: 'qqq' + id }
        ];
        // 创建下一个select
        let select = document.createElement('select')
        // 设置属性，可以不要
        select.setAttribute('id', id)
        // 添加空选项
        let tempOpt = document.createElement('option')
        tempOpt.append(document.createTextNode('请选择'))
        select.append(tempOpt)

        // 添加选项
        for (var i = 0; i < data.length; i++) {
            selectAppendOpt(select, data[i].id, data[i].name)
        }

        // 获取所有select
        var allSelects = document.getElementById('sid').parentNode.children
        // 获取当前页面最后一个select
        let lastSelect = allSelects[allSelects.length - 1]
        // 添加新的select
        lastSelect.after(select);

        // 新select绑定监听事件
        select.addEventListener('change', function () {
            
            let selectIndex = this.selectedIndex  // 选中索引
            id = this.options[selectIndex].value  // 选中value
            var text = this.options[selectIndex].text  // 选中文本
            // 删除当前select标签之后的DOM
            delLastNode(this)

            // 选空时不执行后面的添加操作
            if (id !== '请选择'){
                liveAppend(id)
            }
        })

    }

    // 为首个select添加监听事件
    document.getElementsByTagName('select')[0].addEventListener('change', function () {
        // console.log(this);
        let selectIndex = this.selectedIndex
        var id = this.options[selectIndex].value
        var text = this.options[selectIndex].text
        // 删除当前select标签之后的DOM
        delLastNode(this)

        // 选空时不执行后面的添加操作
        if (id !== '请选择'){
            liveAppend(id)
        }

    })

    /**
     * 为select标签添加option选项
     * @param {DOM} sel  select元素
     * @param {str} optVal  选项值value
     * @param {str} optContent  选项展示的文本
     * @return void
     */
     function selectAppendOpt(sel, optVal, optContent) {
        let tempOpt = document.createElement('option')
        tempOpt.append(document.createTextNode(optContent))
        let value = document.createAttribute('value')
        value.value = optVal
        tempOpt.setAttributeNode(value)
        sel.append(tempOpt)
    }
    /**
     * 删除curNode之后的所有兄弟html元素
     * @param {DOM} curNode  基准DOM，删除该DOM之后的兄弟元素
     * @return void
     */
    function delLastNode(curNode) {
        
        let parentNode = curNode.parentNode
        let brotherNodes = parentNode.children
        let haveFind = false

        for (let i = 0; i < brotherNodes.length; i++) {
            // 获取的兄弟元素中包含了script标签，要排除，js写在body里面，但是页面看却在body外面，和select元素一级，搞不懂
            if (brotherNodes[i]['localName'] !== 'script') {
                if (haveFind) {
                    brotherNodes[i--].remove()
                }
                if (brotherNodes[i] === curNode) {
                    haveFind = true
                }
            }
        }
    }

</script>

</html>

jQuery实现：

<html>

<head>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            list = [
                { id: 1, name: 'jia' },
                { id: 2, name: 'li' }
            ]
            //遍历响应的城市信息
            for (var i = 0; i < list.length; i++) {
                $("#sid").append("<option value='" + list[i].id + "'>" + list[i].name + "</option>");
            }

            let liveAppend = (id) => {
                // id = Number(id)
                var data = [
                    { id: 1 + id, name: 'zzz' + id },
                    { id: 2 + id, name: 'qqq' + id }
                ];
                var select = $("<select></select>")
                $('<option>' + '请选择' + '</option>').appendTo(select)
                for (var i = 0; i < data.length; i++) {
                    $('<option value="' + data[i].id + '">' + data[i].name + '</option>').appendTo(select)
                }

                $("select:last").after(select);

                $("select:last").on('change', function () {
                    //获取选中的id号
                    id = $(this).val();
                    $(this).nextAll().remove();
                    if (id !== '请选择'){
                        liveAppend(id + 1)
                    }
                })

            }

            $("select").on('change', function () {
                //获取选中的id号
                var id = $(this).val();
                $(this).nextAll().remove();
                if (id !== '请选择'){
                    liveAppend(id + 1)
                }

            })

        })

    </script>
</head>

<body>

    <select id="sid">
        <option>请选择</option>
    </select>
</body>

</html>

在这里插入图片描述

qq_40178497

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
select级联选择器参考原生JS实现和jQuery实现

原生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"> <t.
复制链接

扫一扫