原生js实现自定义样式的下拉选择

Posted on

预览

<!DOCTYPE html>
<html lang="en">
  <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>Static Template</title>
  </head>
  <style>
    @charset "UTF-8";
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    li {
      list-style: none;
    }
    /*下拉框样式*/
    #qy-select {
      background: #fff;
      width: 120px;
      height: 28px;
      font-family: PingFangSC, "Microsoft YaHei", sans-serif;
      font-size: 14px;
      color: #232d47;
      border: 1px rgba(38, 42, 51, 0.16) solid;
      border-radius: 4px;
      user-select: none;
      z-index: 9;
    }

    #qy-select > li {
      height: 100%;
    }

    #qy-select .select-head {
      overflow: hidden;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 0 10px;
      line-height: 28px;
      display: flex;
      justify-content: space-around;
    }

    #qy-select .select-head > span {
      height: 100%;
      display: flex;
      align-items: center;
    }

    #qy-select .select-head .select-icon {
      width: 8px;
      background: url("https://cowork-storage-public-cdn.lx.netease.com/common/2022/04/20/dd5d156dc30542f9b1de0349948eff8a.png")
        no-repeat center;
    }

    #qy-select .select-head .select-head-cont {
      float: left;
    }

    #qy-select .select-head .select-icon {
      float: right;
    }

    #qy-select .option {
      margin-top: 1px;
      padding: 8px 0;
      width: 100%;
      color: #232d47;
      background: #fff;
      text-align: center;
      border: 1px #cfcfcf solid;
      display: none;
      border-radius: 4px;
    }

    #qy-select .option .option-item {
      height: 32px;
      line-height: 32px;
    }

    #qy-select .option-item:hover {
      background: #f0f0f1;
      color: #386ee7;
    }

    #qy-select:hover {
      cursor: default;
    }
  </style>
  <body>
    <ul id="qy-select" class="g-price-edit-account-select">
      <li>
        <div class="select-head">
          <span class="select-head-cont"></span>
          <span class="select-icon"></span>
        </div>
        <ul class="option">
          <li class="option-item" value="a5" default="true">5账户/年</li>
          <li class="option-item" value="a20">20账户/年</li>
          <li class="option-item" value="a50">50账户/年</li>
        </ul>
      </li>
    </ul>
  </body>
</html>
<script type="text/javascript">
  (function () {
    /* 下拉选择框 */
    var _selects = document.querySelectorAll("#qy-select");
    _selects.forEach((_select, index) => {
      var selectHead = _select.getElementsByClassName("select-head")[0];
      var selectHeadCont = _select.getElementsByClassName("select-head-cont");
      var Option = _select.getElementsByClassName("option")[0];
      var optionItem = _select.querySelectorAll(".option-item");
      console.log(optionItem);
      //   默认选中
      optionItem.forEach((item, index) => {
        if (item.getAttribute("default")) {
          selectHeadCont[0].innerHTML = item.innerHTML;
          selectHeadCont[0].setAttribute("value", item.getAttribute("value"));
        }
      });
      /*出现下拉框*/
      _select.addEventListener(
        "mouseenter",
        function () {
          Option.style.display = "block";
        },
        false
      );
      /*消失下拉框*/
      _select.addEventListener(
        "mouseleave",
        function () {
          Option.style.display = "none";
        },
        false
      );
      /*点击选项后消失下拉框*/
      var len = optionItem.length;
      for (var i = 0; i < len; i++) {
        optionItem[i].index = i;
        optionItem[i].addEventListener(
          "click",
          function () {
            selectHeadCont[0].innerHTML = optionItem[this.index].innerHTML;
            selectHeadCont[0].setAttribute(
              "value",
              optionItem[this.index].getAttribute("value")
            );
            Option.style.display = "none";
          },
          false
        );
      }
    });
  })();
</script>