原生JS实现自定义下拉单选选择框功能

程序员文章站 2022-03-07 23:05:31

浏览器自带的原生下拉框不太美观，而且各个浏览器表现也不一致，ui一般给的下拉框也是和原生的下拉框差别比较大的，这就需要自己写一个基本功能的下拉菜单/下拉选择框了。最近，把项...

浏览器自带的原生下拉框不太美观，而且各个浏览器表现也不一致，ui一般给的下拉框也是和原生的下拉框差别比较大的，这就需要自己写一个基本功能的下拉菜单/下拉选择框了。最近，把项目中用到的下拉框组件重新封装了一下，以构造函数的方式进行封装，主要方法和事件定义在原型上，下面是主要的实现代码并添加了比较详细的注释，分享出来供大家参考。代码用了es6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,或者直接bable转下。

先放个预览图吧，后面有最终的动态效果图：（样式和交互参考了阿里和iview ui库）

原生JS实现自定义下拉单选选择框功能

下面是主要的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);

到此，一个自定义下拉菜单就出炉了，下面是动态效果：

原生JS实现自定义下拉单选选择框功能

至此，从css自定义的表单元素到下拉框元素都已经自定义完毕，使用bootstrap的同学把这些加进去就能基本保持各浏览器效果一致性和美观性了，就到这吧先。

推荐：

感兴趣的朋友可以关注小编的微信公众号【码农那点事儿】，更多网页制作特效源码及学习干货哦！！！

总结

以上所述是小编给大家介绍的原生js实现一个自定义下拉单选选择框功能，希望对大家有所帮助

上一篇：从Web前端优化网站性能

下一篇： php中重定向网页跳转方法总结案例教程

原生JS实现自定义下拉单选选择框功能

原生js实现下拉框功能（支持键盘事件）

Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)

vue.js实现单选框、复选框和下拉框示例

自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

JS点击图片弹出文件选择框并覆盖原图功能的实现代码

原生js实现select下拉框选择

JS实现的简单下拉框联动功能示例

js实现带搜索功能的下拉框

select下拉选择框美化实现代码(js+css+图片)

JS原生双栏穿梭选择框的实现示例