首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onOctober 12, 2018

浏览器自带的原生下拉框不太美观，而且各个浏览器表现也不一致，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实现一个自定义下拉单选选择框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

山海之间

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
详解AngularJS Filter（过滤器）用法
Dec 28 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
原生JS实现轮播图效果
Oct 12 #Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 #Javascript
Element Input组件分析小结
Oct 11 #Javascript
element el-input directive数字进行控制
Oct 11 #Javascript
详解angular2.x创建项目入门指令
Oct 11 #Javascript
详解vscode中vue代码颜色插件
Oct 11 #Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 #Javascript
239军机(1) 74HC4066(1) DE1103(2) AN-LP1(1) YB-230(1) BCLer(1) frg-100(1) ICF-903L(1) YAESU(1) 根德5570(1)
You might like
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
YUI的Tab切换实现代码
2010/04/11 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
利用javascript实现的三种图片放大镜效果实例（附源码）
2017/01/23 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
[02:22:36]《加油！DOTA》总决赛
2014/09/19 DOTA
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
Python中存取文件的4种不同操作
2018/07/02 Python
Python实现微信小程序支付功能
2019/07/25 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
日本最大的购物网站：日本乐天市场（Rakuten Ichiba）
2020/11/04 全球购物
《维生素c的故事》教学反思
2014/02/18 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
材料员岗位职责范本
2015/04/11 职场文书
《绝招》教学反思
2016/02/20 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
创业计划书之花店
2019/09/20 职场文书