原生js实现自定义样式的下拉选择修改select样式<meta name="viewport" content="wi

预览
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .qy-select {
        margin: 20px;
        background: #fff;
        width: 80px;
        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,
      .qy-select .option > li {
        height: 100%;
        list-style: none;
      }

      .qy-select .select-head {
        overflow: hidden;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 0 10px;
        line-height: 28px;
      }

      .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;
      }

      .qy-select:hover {
        cursor: default;
      }

      /*账户选择下拉框*/
      .qy-select {
        width: 184px;
        height: 44px;
        color: #4e5a70;
        border: 1px #e1e6ed solid;
        border-radius: 4px;
      }

      .qy-select .select-head {
        padding: 0 18px 0 12px;
      }

      .qy-select .select-head .select-head-cont {
        color: #4e5a70;
      }

      .qy-select .select-head .select-icon {
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACrSURBVHgBlZHbDcIwDEVtdwFGKRswAhUsgFTxg3hkEkARP1Am4NFRChswSIhJilq1laWm98dxrk+i3CA46eyRuzKFAaJ/wREMVAmaCBcM+AmF/CxWzemcx5ZsEQIaS2OqmtUyeTGD6oOQrVJuFruGzu4HZ29ljI/rdL4rD5BsfX0WwBy3EID3Jp3VeySBhjBphuXX34ha3yXe6NUMy4fh3wWh2jtYX24TyfsBqSY5biheiTEAAAAASUVORK5CYII=")
          no-repeat center;
        background-size: contain;
      }

      .qy-select .option {
        margin-top: 2px;
        padding: 8px 0;
        width: 100%;
        color: #4e5a70;
        background: #fff;
        text-align: left;
        border: 1px #e1e6ed solid;
        display: none;
        border-radius: 4px;
      }

      .qy-select .option .option-item {
        height: 44px;
        line-height: 44px;
        padding-left: 12px;
      }
      .qy-select .option .option-item[disabled] {
        cursor: not-allowed;
        color:#cfcfcf
      }

      .qy-select .option-item:hover {
        background: #f2f5ff;
      }
    </style>
  </head>
  <body>
    <ul id="qy-select" class="qy-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="5" default="true">选项一</li>
          <li class="option-item" disabled value="10">选项一一</li>
          <li class="option-item" value="20">选项一一一</li>
        </ul>
      </li>
    </ul>
  </body>
  <script>
    function setValue(value) {
      console.log("选择了", value);
    }
    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");
      //   默认选中
      optionItem.forEach((item, i) => {
        if (item.getAttribute("default")) {
          selectHeadCont[0].innerHTML = item.innerHTML;
          selectHeadCont[0].setAttribute("value", item.getAttribute("value"));
        }
        // if (selectHeadCont[0].getAttribute('value') === item.getAttribute('value')) {
        //   item.style.color = 'red';
        // }
      });
      /*出现下拉框*/
      _select.addEventListener(
        "click",
        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 (e) {
            e.stopPropagation();
            if(e.target.getAttribute("disabled")!==null){
                return
            }
            const num = optionItem[this.index].getAttribute("value");
            selectHeadCont[0].innerHTML = optionItem[this.index].innerHTML;
            selectHeadCont[0].setAttribute("value", num);
            Option.style.display = "none";
            setValue(num, _select, index);
          },
          false
        );
      }
    });
  </script>
</html>
原生js实现自定义样式的下拉选择 修改select样式

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