原生JS实现自定义下拉单选选择框功能
程序员文章站
2022-06-19 18:25:37
浏览器自带的原生下拉框不太美观，而且各个浏览器表现也不一致，ui一般给的下拉框也是和原生的下拉框差别比较大的，这就需要自己写一个基本功能的下拉菜单/下拉选择框了。最近，把项...
浏览器自带的原生下拉框不太美观，而且各个浏览器表现也不一致，ui一般给的下拉框也是和原生的下拉框差别比较大的，这就需要自己写一个基本功能的下拉菜单/下拉选择框了。最近，把项目中用到的下拉框组件重新封装了一下，以构造函数的方式进行封装，主要方法和事件定义在原型上，下面是主要的实现代码并添加了比较详细的注释，分享出来供大家参考。代码用了es6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,或者直接bable转下。
先放个预览图吧，后面有最终的动态效果图：（样式和交互参考了阿里和iview ui库）
下面是主要的html代码(包含部分js调用代码)：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>diy select</title>
<link rel="stylesheet" href="index.css" rel="external nofollow" >
</head>
<body>
<div id="main" class="main"></div>
<script src="index.js"></script>
<script>
document.addeventlistener("domcontentloaded",function(){
const select1 = new $selector({
eleselector:"#main",
options:[
{name:"选项1",value:"0"},
{name:"选项2",value:"1"},
{name:"选项3",value:"2"}
],
defaulttext:"选项2"
});
})
</script>
</body>
</html>
页面中定义了id为main的div，即为选择框所要添加到的元素。传入参数即可。
接着就是样式css部分了，没啥说的了，手动滑稽：
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.main {
padding: 40px;
}
.my-select {
display: inline-block;
width: auto;
min-width: 80px;
box-sizing: border-box;
vertical-align: middle;
color: #515a6e;
font-size: 14px;
line-height: normal;
position: relative;
}
.select-selection {
display: block;
box-sizing: border-box;
outline: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
position: relative;
background-color: #fff;
border-radius: 4px;
border: 1px solid #dcdee2;
transition: all .2s ease-in-out;
}
.select-selection:hover,
.select-selection.select-focus {
border-color: #57a3f3;
box-shadow: 0 0 0 2px rgba(45, 140, 240, .2);
}
.select-selected-value {
display: block;
height: 28px;
line-height: 28px;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 8px;
padding-right: 24px;
}
.icon-select-arrow {
position: absolute;
top: 50%;
right: 8px;
line-height: 1;
margin-top: -7px;
font-size: 14px;
color: #808695;
transition: all .2s ease-in-out;
display: inline-block;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: middle;
}
.icon-select-arrow::before {
content: "";
display: block;
width: 6px;
height: 6px;
background-color: transparent;
border-left: 1.5px solid #808695;
border-bottom: 1.5px solid #808695;
transform: rotate(-45deg);
}
.select-dropdown {
width: auto;
min-width: 80px;
max-height: 200px;
overflow: auto;
margin: 5px 0;
padding: 5px 0;
background-color: #fff;
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
position: absolute;
z-index: 2;
transform-origin: center top 0px;
transition: all 0.3s;
will-change: top, left;
top: 30px;
left: 0;
transform: scale(1, 0);
opacity: 0;
}
.select-item {
line-height: normal;
padding: 7px 16px;
clear: both;
color: #515a6e;
font-size: 12px !important;
white-space: nowrap;
list-style: none;
cursor: pointer;
transition: background .2s ease-in-out;
}
.select-item.select-item-selected,
.select-item:hover {
color: #2d8cf0;
background-color: #f3f3f3;
}
样式部分就不做什么解释了，下面放入压轴的js，同样也无需过多解释，注释写的很详细了，上代码：
/* jshint esversion: 6 */
(function (window, document) {
let selector = function (option) {
//执行初始化方法，
this._init(option);
};
selector.prototype = {
//初始化传入参数并定义初始化的相关变量
_init({
eleselector = "", //传入的选择器 id,class，tag等，用于将选择框渲染到此选择器所在的元素
options = [{
name: "请选择",
value: "0",
}], //传入的下拉框对象，name为选择的文字，value为值
defaulttext = "请选择" //提供的默认选择的值
}) {
//将传入的数据绑定到this上
this.parentele = document.queryselector(eleselector) || document.body; //要邦定的dom
this.options = options; //选择值数组对象
this.defaulttext = defaulttext; //默认值
this.dropboxshow = false; //定义存储下拉框的显示隐藏状态
this.defaultvalue = ""; //定义村赤默认选中的值
this._createlement(); //初始化后执行创建元素方法
},
//创建下拉选择框dom
_createlement() {
//选择框最外层的包裹元素
let wrapele = document.createelement("div");
wrapele.classname = "my-select";
//根据传入的值获取选择框默认的值和内容
this.options.foreach(item => {
if (item.name === "this.defaulttext") {
this.defaultvalue = item.value;
}
});
let selectwarpbox = document.createelement("div"); //选择框包裹元素
selectwarpbox.classname = "select-selection";
let inputhidebox = document.createelement("input"); //隐藏保存选择值得元素
inputhidebox.type = "hidden";
inputhidebox.value = this.defaultvalue;
let selectshowbox = document.createelement("div"); //选择框默认展示框
let selectnamebox = document.createelement("span"); //选择框展现的值ele
selectnamebox.classname = "select-selected-value";
selectnamebox.id = "select-option";
selectnamebox.innertext = this.defaulttext; //将传入的默认值赋值
let selecticon = document.createelement("i"); //图标ele
selecticon.classname = "arrow-down icon-select-arrow";
//将span和角标添加到外层div
selectshowbox.appendchild(selectnamebox);
selectshowbox.appendchild(selecticon);
selectwarpbox.appendchild(inputhidebox);
selectwarpbox.appendchild(selectshowbox);
//下拉框
let dropbox = document.createelement("div"),
ulbox = document.createelement("ul");
dropbox.id = "select-drop";
dropbox.classname = "select-dropdown";
ulbox.classname = "select-dropdown-list";
//遍历传入的选项数组对象，生成下拉菜单的li元素并赋值
this.options.foreach((item) => {
let itemli = document.createelement("li");
if (this.defaulttext === item.name) {
itemli.classname = "select-item select-item-selected";
} else {
itemli.classname = "select-item";
}
itemli.setattribute("data-value", item.value);
itemli.innertext = item.name;
ulbox.appendchild(itemli);
});
//将下拉框ul推入到包裹元素
dropbox.appendchild(ulbox);
wrapele.appendchild(selectwarpbox);
wrapele.appendchild(dropbox);
this.parentele.appendchild(wrapele); //将生成的下拉框添加到所选元素中
//把需要操作的dom挂载到当前实例
//this.wrapele = wrapele; //最外层包裹元素
this.eleselect = selectwarpbox; //选择框
this.eledrop = dropbox; //下拉框
this.elespan = selectnamebox; //显示文字的span节点
//绑定事件处理函数
this._bind(this.parentele);
},
//点击下拉框事件处理函数
_selecthandleclick() {
if (this.dropboxshow) {
this._selectdropup();
} else {
this._selectdropdown();
}
},
//收起下拉选项
_selectdropup() {
this.eledrop.style.transform = "scale(1,0)";
this.eledrop.style.opacity = "0";
this.eleselect.classname = "select-selection";
this.dropboxshow = false;
},
//展示下拉选项
_selectdropdown() {
this.eledrop.style.transform = "scale(1,1)";
this.eledrop.style.opacity = "1";
this.eleselect.classname = "select-selection select-focus";
this.dropboxshow = true;
},
//点击下拉选项进行赋值
_dropitemclick(ele) {
this.defaultvalue = ele.getattribute("data-value");
//document.queryselector("#select-value").value = ele.getattribute("data-value");
this.elespan.innertext = ele.innertext;
ele.classname = "select-item select-item-selected";
//对点击选中的其他所有兄弟元素修改class去除选中样式
this._siblingsdo(ele, function (ele) {
if (ele) {
ele.classname = "select-item";
}
});
this._selectdropup();
},
//node遍历是否是子元素包裹元素
_gettargetnode(ele, target) {
//ele是内部元素，target是你想找到的包裹元素
if (!ele || ele === document) return false;
return ele === target ? true : this._gettargetnode(ele.parentnode, target);
},
//兄弟元素遍历处理函数
_siblingsdo(ele, fn) {
(function (ele) {
fn(ele);
if (ele && ele.previoussibling) {
arguments.callee(ele.previoussibling);
}
})(ele.previoussibling);
(function (ele) {
fn(ele);
if (ele && ele.nextsibling) {
arguments.callee(ele.nextsibling);
}
})(ele.nextsibling);
},
//绑定下拉框事件处理函数
_bind(parentele) {
let _this = this;
//事件委托到最外层包裹元素进行绑定处理
parentele.addeventlistener("click", function (e) {
const ele = e.target;
//遍历当前点击的元素，如果是选中框内的元素执行
if (_this._gettargetnode(ele, _this.eleselect)) {
if (_this.dropboxshow) {
_this._selectdropup();
} else {
_this._selectdropdown();
}
} else if (ele.classname === "select-item") { //如果是点击的下拉框的选项执行
_this._dropitemclick(ele);
} else { //点击其他地方隐藏下拉框
_this._selectdropup();
}
});
}
};
//将构造函数挂载到全局window
window.$selector = selector;
})(window, document);
到此，一个自定义下拉菜单就出炉了，下面是动态效果：
至此，从css自定义的表单元素到下拉框元素都已经自定义完毕，使用bootstrap的同学把这些加进去就能基本保持各浏览器效果一致性和美观性了，就到这吧先。
推荐：
感兴趣的朋友可以关注小编的微信公众号【码农那点事儿】，更多网页制作特效源码及学习干货哦！！！
总结
以上所述是小编给大家介绍的原生js实现一个自定义下拉单选选择框功能，希望对大家有所帮助