我用Js封装的第一个控件

使用Js面向对象的封装的第一个下拉级联控件
Js部分

"use strict";
class CascadingDropDown {
    constructor(opt) {
        const ops = {
            el: "",
            css: "/scripts/cascadingDropDown/class.css",
            data: [],
            callback: function () { }
        }
        this.ops = Object.assign({}, ops, opt)
    }
    //控件样式
    appendCss() {
        let that = this;
        let link = document.createElement("link");
        link.href = that.ops.css;
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link.setAttribute("id", "main")
        document.querySelector("head").appendChild(link);
    }
    //控件html部分
    appendHtml() {
        let that = this;
        let html = '';
        if (that.ops.data && that.ops.data.length > 0) {
            let data = that.ops.data
            //首项 --请选择--
            data.unshift({ Name: '请选择', Level: 1, ID: -1 })
            html += '<div class="main">'
            html += '   <div class="select-container">'
            html += '       <span></span>'
            html += '            <input type="text" autocomplete="off" class="select-container-input" data-value="0" value="请选择" id="InitComboxHideTxt" readonly="readonly" />'
            html += '                <ul id="InitComboxSel" class="comBoxSel">'
            //渲染地点下拉
            data.filter(x => { return x.Level === 1 }).forEach(item => {
                html += `                    <li onclick="document.getElementById('InitComboxHideTxt').value = this.innerText;document.getElementById('InitComboxHideTxt').setAttribute('data-value', this.getAttribute('data-value'));" data-value=${item.ID || 0}>${item.Name}</li>`
            })
            html += '                </ul>'
            html += '   </div>'
            html += '   <div class="select-container-right">'
            html += '        <input type="text" id="InitComboxTxt" class="comBoxTxt" autocomplete="off"/>'
            html += '        <ul id="InitComboxUl" class="comBoxUl"></ul>'
            html += '    </div>'
            html += '</div>'
        }

        //避免重复添加Div
        if (document.querySelector("#ComboxContainer") === null) {
            let htmlDiv = document.createElement("div");
            htmlDiv.setAttribute("id", "ComboxContainer");
            htmlDiv.innerHTML = html;
            document.querySelector(that.ops.el).appendChild(htmlDiv);
        }

    }
    //控件事件部分
    evnet() {
        let that = this;
        let el;
        if ((that.ops.el).match(/[#.]/)) {
            el = document.querySelector(that.ops.el);
            if (!el) {
                return console.log("你传入的el没有查找到")
            }
        } else {
            el = document.querySelectorAll(thas.ops.el);
            if (el.length == 0) {
                return console.log("你传入的el没有查找到")
            }
        }
        InitEvent();
        function InitEvent() {
            function $(id) {
                return document.getElementById(id);
            };
            // 获取对象
            let initComboxSel = $("InitComboxSel"), initComboxTxt = $("InitComboxTxt"), initComboxUl = $("InitComboxUl"), initComboxHideTxt = $("InitComboxHideTxt");
            (function (window) {
                // 输入框 需要和区域下拉改变事件进行联动 并且点击输入框弹出下拉
                initComboxTxt.oninput = function (obj) {
                    let selectVal = parseInt(initComboxHideTxt.getAttribute("data-value"))
                    let detailData = that.ops.data.filter(item => { return item.ParentId === selectVal && item.Name.indexOf(obj.currentTarget.value) !== -1 })
                    InitinitComboxUlHtml(detailData);
                    setStorge();
                };
                initComboxTxt.onfocus = function () {
                    //清空输入框
                    initComboxTxt.value = ""
                    let selectVal = parseInt(initComboxHideTxt.getAttribute("data-value"))
                    if (![-1, 0].includes(selectVal)) {
                        let detailData = that.ops.data.filter(item => { return item.ParentId === selectVal })
                        InitinitComboxUlHtml(detailData);
                    } else {
                        initComboxUl.innerHTML = ""
                    }
                    initComboxUl.style.left = (initComboxTxt.offsetLeft - 30) + "px"
                    initComboxUl.style.display = "block"
                    setStorge();
                };
                initComboxTxt.onblur = function () {
                    setTimeout(() => { initComboxUl.style.display = "none"; setStorge(); }, 150);
                };
                initComboxHideTxt.onfocus = function () {
                    initComboxSel.style.display = 'block'
                    initComboxTxt.value = ""
                }
                initComboxHideTxt.onblur = function () {
                    setTimeout(() => { initComboxSel.style.display = 'none'; setStorge(); }, 150)
                }
                //填充下拉数据
                const InitinitComboxUlHtml = (detailData) => {
                    if (detailData && detailData.length > 0) {
                        let html = ''
                        detailData.forEach(item=> {
                            html += `<li style="list-style:none" onclick="document.getElementById('InitComboxTxt').value=this.innerText">${item.Name}</li>`
                        })
                        initComboxUl.innerHTML = html
                    } else {
                        initComboxUl.innerHTML = ""
                    }
                }
                //设置缓存
                const setStorge = () => {
                    setTimeout(() => {
                        localStorage.setItem("CascadingDropDown", JSON.stringify(
                            {
                                selectVal: parseInt(initComboxHideTxt.getAttribute("data-value")),
                                selectTxt: initComboxHideTxt.value,
                                streetTxt: initComboxTxt.value
                            })
                        )
                        return that.ops.callback(localStorage.getItem("CascadingDropDown"))
                    })
                }
            })(window)
        }
    }
    //初始化控件
    init() {
        let that = this;
        //填载样式
        that.appendCss();
        //填载html
        that.appendHtml();
        //填载事件
        that.evnet()
        return that;
    }
}

css部分

.main {
    font: 400 13.3333px Arial;
}

.select-container {
    position: relative;
    display: inline-block;
}

.select-container-input:read-only {
    cursor: pointer;
    background-color: white;
}

.select-container input {
    width: 150px;
    height: 28px;
    margin-top: 15px;
    line-height: 24px;
    text-indent: 15px;
    border: 0.5px #ccc solid;
}

.select-container span {
    /* 定位至 input 尾部 */
    position: absolute;
    top: 27px;
    left: 130px;
    /* 屏蔽点击事件 */
    pointer-events: none;
    border-width: 5px;
    border-style: solid;
    border-color: gray transparent transparent transparent;
}

.select-container ul {
    /* 定位至 input 下面 */
    position: absolute;
    top: 44px;
    left: 0px;
    padding: 0;
    /* 显示在 input 上面 */
    z-index: 9999;
    width: 150px !important;
    /* 默认隐藏 */
    display: none;
    list-style: none;
    /* 边框 */
    border: 1px solid #ccc;
    background: white;
}

.select-container li {
    /* 使背景色占满一行 */
    display: inline-block;
    width: 130px;
    color: #000000;
    text-indent: 5px;
    /* 默认背景色 */
    background: #fff;
    /* 去掉下划线 */
    text-decoration: none;
    border: 1px white gray;
    padding: 5px;
    margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 2px;
}

    .select-container li:hover {
        color: #fff;
        background: #1ebdd2;
        cursor: pointer;
    }

    .select-container li a.selected {
        color: #fff;
        background: #1ebdd2;
    }

.select-container-right {
    display: inline-block;
    position:relative;
}

.comBoxTxt {
    margin-left: 30px;
    outline-style: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 2px;
    width: 300px;
    height: 30px;
    font: 400 13.3333px Arial;
    display: inline-block;
}

.comBoxUl {
    display: none;
    width: 310px;
    height: 200px;
    overflow: auto;
    z-index: 9999;
    position: absolute;
    left: 25px !important;
    /* top: 153px; */
    border: 1px #ccc solid;
    /* border-top: none; */
    margin-left: 3px;
    background: white;
}

    .comBoxUl li {
        margin-top: 3px;
        margin-left: 10px;
        padding: 5px;
        width: 90%;
    }

        .comBoxUl li:hover {
            background-color: #1ebdd2;
            color: white;
            cursor: pointer;
        }

::-webkit-scrollbar-track-piece {
    /*滚动条凹槽的颜色，还可以设置边框属性*/
    background-color: #f8f8f8;
}

::-webkit-scrollbar {
    /*滚动条的宽度*/
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-thumb {
    /*滚动条的设置*/
    background-color: #dddddd;
    background-clip: padding-box;
    min-height: 28px;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #bbb;
    }

调用方式

 new CascadingDropDown({
                            el: "#QcAddress",
                            data: data.msgdata,
                            callback: function (res) {
                                //selectVal 被选中的一级层级的id
                                //selectTxt 被选中的一级层级的名字
                                //streetTxt 被选中的街道层级的名字
                                console.log(JSON.parse(res))                             
                            }
                        }).init()

需要先将css路径更改为自己路径

然后初始化控件 callback是改变下拉值得回调事件