原生js实现下拉框选择组件
作者:蒲公英芽
本文实例为大家分享了js实现下拉框选择组件的具体代码,供大家参考,具体内容如下
功能需求:
1、点击div后,div显示聚焦状态,同时显示下拉框内容;
2、选择儿童人数后,如果儿童人数大于0,在下方出现对应的儿童年龄选择框数量;
3、成人人数的选择范围是1-7,儿童人数的选择范围是0-4,儿童年龄的选择范围是<1、1-17;
4、点击确认按钮后,将选择好的成人人数和儿童人数显示在最上方的div内;
5、可以控制选择框是否可点击;
6、当显示一个ul列表时,点击另一个ul列表,将上一个ul列表隐藏;
7、点击隐藏框内除绑定事件元素外,将正在显示的ul列表隐藏;
8、点击页面中任意空白位置,将显示的下拉框内容整体隐藏;
下拉框不可操作时的显示状态:
下拉框可操作时:
选择儿童人数后,下方自动出现对应数量的儿童年龄选择框:
点击确认按钮后,将结果显示在是上方的div内:
刚开始的想法是对select、ul下拉列表、btn按钮分别进行事件监听,此外还要有当点击下拉框内其它位置时,ul下拉列表隐藏、当点击body时整个下拉框内容隐藏。监听事件过多,而且事件冒泡也会影响事件的执行,导致某些事件会出现执行多次的情况。
儿童年龄的选择框是根据儿童的人数来生成的,有几个儿童,就有几个年龄选择框。这种情况下,年龄的选择框肯定是动态创建的,无法针对年龄的select进行事件监听,只能采用事件委托的形式,所以最后把对select、ul下拉列表、btn按钮的点击事件,还有当点击container内其它位置时,ul下拉列表隐藏。全部委托给了dropDownContainer元素。
下面附上代码
html结构代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>select</title> </head> <body> <script type="module"> import Main from './js/Main.js'; //参数为false时,选择框不可点击;为true时,选择框可使用 let main=new Main(true); main.appendTo("body"); </script> </body> </html>
Main.js文件:
import Utils from './Utils.js'; export default class Main{ static styles=false; listPrep; constructor(state){ //state控制下拉框是否可点击 this.state=state; this.elem=this.createE(); } createE(){ if(this.elem) return this.elem; let div=Utils.createE("div"); div.className="guestsNum"; div.innerHTML=`<span>人数未定</span><i></i> <div class="dropDownContainer none" id="dropDownContainer"> <div class="dropDownItem clearfix"> <span>每间</span> <div class="dropDownSelect"> <div class="dropDownCont"><span id="adultNum">2 成人</span><i></i></div> <ul class="dropDownList" tag="adult">${this.setDropDownList("adult")}</ul> </div> <div class="dropDownSelect"> <div class="dropDownCont"><span id="childrenNum">0 儿童</span><i></i></div> <ul class="dropDownList" tag="children"><li>0</li>${this.setDropDownList("children")}</ul> </div> </div> <div class="dropDownItem clearfix none" id="ItemAge"></div> <div class="dropDownBottom clearfix"> ${this.state?'':'<em class="dropDownTips">请优先选择日期,以便查询实时价格。</em>'} ${this.state?'<a class="dropDownBtn" id="dropDownBtn" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >确认</a>':'<a class="dropDownBtn disabled" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >确认</a>'} </div> </div>`; //设置样式,因为样式只设置一次就好,不需要实例化,所以使用静态方法 Main.setStyles(); //获取元素 Utils.getIdElem(div,this); //监听div的点击事件 div.addEventListener("click",(e)=>this.guestsNumClickHandler(e)); //如果state为true,下拉框监听点击事件 if(this.state) this.dropDownContainer.addEventListener("click",e=>this.dropDownContainerClick(e)); //document监听点击事件,隐藏下拉框 document.addEventListener("click",e=>this.documentClick(e)); return div; } appendTo(parent){ Utils.appendTo(this.elem,parent); } guestsNumClickHandler(e){ //如果下拉框是显示状态,则直接跳出,避免重复操作 if(!Utils.hasClass(this.dropDownContainer,"none")) return; //如果点击的不是guestsNum,直接跳出,避免事件冒泡 if(e.target.nodeName!=="SPAN"&&e.target.nodeName!=="I"&&!Utils.hasClass(e.target,"guestsNum")) return; //给div添加聚集样式 Utils.addClass(this.elem,"focus"); //将dropDownContainer显示 Utils.removeClass(this.dropDownContainer,"none"); } dropDownContainerClick(e){ if(e.target.nodeName==="LI"){ //点击ul选择列表 this.dropDownListClick(e); } else if(e.target.id==="dropDownBtn"){ //点击确认按钮 this.dropDownBtnClick(); } else if(e.target.nodeName==="SPAN" || e.target.nodeName==="I") { //点击span或者i标签时,将它们的父元素div作为参数 this.dropDownSelectClick(e.target.parentElement); } else if(Utils.hasClass(e.target,"dropDownCont")){ //点击div选择框时,将div作为参数 this.dropDownSelectClick(e.target); } else { //点击下拉框内其它位置时,让当前的ul列表隐藏 if(this.listPrep) this.listPrep.style.display="none"; } } dropDownSelectClick(div){ //隐藏掉上一个显示的ul列表 if(this.listPrep) this.listPrep.style.display="none"; //当前点击的ul列表赋值给this.listPrep this.listPrep=div.nextElementSibling; //将当前点击的ul列表显示 this.listPrep.style.display="block"; } dropDownListClick(e){ //获取当前点击的ul的tag属性值 let tag=this.listPrep.getAttribute("tag"); let unit=""; switch (tag){ case "adult": unit="成人";break; case "children": unit="儿童"; let txt=Number(e.target.innerText); //根据li的数值,自动创建下面的年龄选择框 this.setDropDownItemAge(txt); break; case "age": unit="岁";break; } //将选择的li的值,显示出来 this.listPrep.previousElementSibling.firstElementChild.textContent=e.target.innerText+" "+unit; //显示完成后,将当前显示的ul隐藏 this.listPrep.style.display="none"; } setDropDownItemAge(txt){ let str="<span>儿童年龄</span>"; if(txt===0){ //如果是0,则年龄选择框不显示 this.ItemAge.style.display="none"; }else{ this.ItemAge.style.display="block"; //循环选择的数值,创建年龄选择框 for(let i=0;i<txt;i++){ str+=`<div class="dropDownSelect"> <div class="dropDownCont"><span><1岁</span><i></i></div> <ul class="dropDownList" tag="age"><li><1</li>${this.setDropDownList("age")}</ul> </div>`; } this.ItemAge.innerHTML=str; } } dropDownBtnClick(){ //将选择的内容显示在最上方的select框内 let resultStr=this.adultNum.innerText.replace(/\s/g,"")+" "+this.childrenNum.innerText.replace(/\s/g,""); this.elem.firstElementChild.textContent=resultStr; //隐藏dropDownContainer this.dropDownContainerHide(); } documentClick(e){ //避免事件冒泡 if(e.target!==document.documentElement && e.target!==document.body) return; //隐藏dropDownContainer this.dropDownContainerHide(); } dropDownContainerHide(){ //div去掉聚集状态 Utils.removeClass(this.elem,"focus"); //dropDownContainer隐藏 Utils.addClass(this.dropDownContainer,"none"); //隐藏当前显示的ul列表 if(this.listPrep) this.listPrep.style.display="none"; } setDropDownList(type){ //创建ul下拉列表内容 let li=""; let max=0; switch (type){ case "adult": max=8;break; case "children": max=5;break; case "age": max=18;break; } for(let i=1;i<max;i++){ li+="<li>"+i+"</li>"; } return li; } static setStyles(){ if(Main.styles) return; Main.style=true; Utils.insertCss(".guestsNum",{ width:"108px", height:"34px", padding:"0px 12px", border:"1px solid #ccc", borderRadius:"3px", position:"relative", fontSize:"14px", color:"#666", userSelect:"none", }) Utils.insertCss(".guestsNum.focus",{ borderColor:"#ffa800", boxShadow:"0 0 4px #ffa800" }) Utils.insertCss(".guestsNum>span",{ lineHeight:"34px" }) Utils.insertCss(".guestsNum>i",{ display:"inline-block", width:"16px", height:"16px", backgroundImage:"url(./image/user.jpg)", float:"right", margin:"8px 0px 0px 10px" }) Utils.insertCss(".dropDownContainer",{ border: "1px solid #ffa800", borderRadius: "4px", boxShadow: "0 0 4px #ffa800", backgroundColor: "#fff", padding: "20px 15px", width: "480px", fontSize:"12px", position:"absolute", left:"0px", top:"35px", }) Utils.insertCss(".dropDownItem",{ marginBottom:"12px" }) Utils.insertCss(".dropDownItem>span",{ display:"block", width:"60px", lineHeight:"28px", float:"left", }) Utils.insertCss(".dropDownSelect",{ width:"90px", height:"30px", marginRight:"10px", float:"left", position:"relative" }) Utils.insertCss(".dropDownCont",{ border:"1px solid #ccc", borderRadius:"3px", height:"12px", padding:"6px 8px 10px", }) Utils.insertCss(".dropDownCont>span",{ display:"inline-block", width:"53px", height:"14px", lineHeight:"14px", borderRight:"1px solid #ccc" }) Utils.insertCss(".dropDownCont>i",{ display:"inline-block", width:"0px", height:"0px", border:"5px solid #c6c6c6", borderColor:"#c6c6c6 transparent transparent", margin: "6px 0px 0px 4px", float: "right" }) Utils.insertCss(".dropDownList",{ listStyle:"none", padding:"0px", margin:"0px", width:"88px", maxHeight:"200px", overflow:"auto", cursor:"pointer", border:"1px solid #ccc", backgroundColor:"#fff", borderRadius:"4px", position:"absolute", left:"0px", top:"30px", zIndex:"2", boxShadow: "1px 1px 3px rgba(0,0,0,.1)", display:"none" }) Utils.insertCss(".dropDownList>li",{ lineHeight:"28px", paddingLeft:"8px", }) Utils.insertCss(".dropDownList>li:hover",{ background:"#f4f4f4" }) Utils.insertCss(".dropDownBottom",{ borderTop:"1px solid #ccc", marginTop:"20px", paddingTop:"20px" }) Utils.insertCss(".dropDownTips",{ fontStyle:"normal", fontSize: "12px", color: "#ef523d", lineHeight:"28px" }) Utils.insertCss(".dropDownBtn",{ textDecoration:"none", float: "right", display: "inline-block", padding: "2px 22px", backgroundColor: "#ffb200", borderRadius: "4px", fontSize: "14px", lineHeight: "24px", color: "#fff", }) Utils.insertCss(".dropDownBtn.disabled",{ backgroundColor: "#efefef", color: "#999" }) Utils.insertCss(".clearfix:after",{ content:"\".\"", display:"block", overflow:"hidden", visibility:"hidden", clear:"both", height:"0px" }) Utils.insertCss(".none",{ display:"none" }) } }
Utils.js文件:
export default class Utils{ static createE(elem,style,prep){ elem=document.createElement(elem); if(style) for(let prop in style) elem.style[prop]=style[prop]; if(prep) for(let prop in prep) elem[prop]=prep[prop]; return elem; } static appendTo(elem,parent){ if (parent.constructor === String) parent = document.querySelector(parent); parent.appendChild(elem); } static randomNum(min,max){ return Math.floor(Math.random*(max-min)+min); } static randomColor(alpha){ alpha=alpha||Math.random().toFixed(1); if(isNaN(alpha)) alpha=1; if(alpha>1) alpha=1; if(alpha<0) alpha=0; let col="rgba("; for(let i=0;i<3;i++){ col+=Utils.randomNum(0,256)+","; } col+=alpha+")"; return col; } static insertCss(select,styles){ if(document.styleSheets.length===0){ let styleS=Utils.createE("style"); Utils.appendTo(styleS,document.head); } let styleSheet=document.styleSheets[document.styleSheets.length-1]; let str=select+"{"; for(var prop in styles){ str+=prop.replace(/[A-Z]/g,function(item){ return "-"+item.toLocaleLowerCase(); })+":"+styles[prop]+";"; } str+="}" styleSheet.insertRule(str,styleSheet.cssRules.length); } static getIdElem(elem,obj){ if(elem.id) obj[elem.id]=elem; if(elem.children.length===0) return obj; for(let i=0;i<elem.children.length;i++){ Utils.getIdElem(elem.children[i],obj); } } static addClass(elem,className){ let arr=(elem.className+" "+className).match(/\S+/g); arr=arr.filter((item,index)=>arr.indexOf(item,index+1)<0) elem.className=arr.join(" "); } static removeClass(elem,className){ if(!elem.className) return; let arr=elem.className.match(/\S+/g); let arr1=className.match(/\S+/g); arr1.forEach(item=>{ arr=arr.filter(t=>t!==item) }) elem.className=arr.join(" "); } static hasClass(elem,className){ if(!elem.className) return false; let arr=elem.className.match(/\S+/g); let arr1=className.match(/\S+/g); let res; arr1.forEach(item=>{ res= arr.some(it=>it===item) }) return res; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。