使用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是改变下拉值得回调事件
