如何使用JavaScript进行自定义选择

在JavaScript中进行自定义选择通常指的是创建一个可滚动的列表，用户可以从中选择一个或多个选项。这种功能在网页表单中非常常见，尤其是在需要用户从大量选项中选择时。以下是实现自定义选择的基本概念、优势、类型、应用场景以及示例代码。

基础概念

自定义选择通常涉及以下几个概念：

HTML结构：创建一个容器来显示选项列表。
CSS样式：美化选择框的外观，使其更符合设计需求。
JavaScript交互：添加事件监听器来处理用户的点击和滚动事件，以及更新显示的值。

优势

用户体验：提供更直观和个性化的选择体验。
可访问性：可以更好地控制键盘导航和屏幕阅读器的支持。
灵活性：可以根据需要自定义样式和行为。

类型

单选：用户只能选择一个选项。
多选：用户可以选择多个选项。
搜索过滤：允许用户在选项列表中进行搜索以快速找到所需选项。
远程数据加载：从服务器动态加载选项。

应用场景

表单填写：如选择国家、城市、兴趣爱好等。
配置设置：如软件安装时的选项配置。
数据筛选：如电商网站的商品筛选。

示例代码

以下是一个简单的自定义单选选择框的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Select Box</title>
<style>
  .custom-select {
    position: relative;
    display: inline-block;
    width: 200px;
  }
  .select-selected {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 8px 16px;
    cursor: pointer;
  }
  .select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #333 transparent transparent transparent;
  }
  .select-selected.select-arrow-active:after {
    border-color: transparent transparent #333 transparent;
    top: 8px;
  }
  .select-items {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none;
    z-index: 99;
    width: 100%;
  }
  .select-hide {
    display: none;
  }
  .select-items div, .select-selected {
    color: #333;
    padding: 8px 16px;
    cursor: pointer;
  }
  .select-items div:hover, same-as-selected {
    background-color: #f1f1f1;
  }
</style>
</head>
<body>

<div class="custom-select">
  <div class="select-selected">Select an option</div>
  <div class="select-items select-hide">
    <div>Option 1</div>
    <div>Option 2</div>
    <div>Option 3</div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var x, i, l, ll, selElmnt, a, b, c;
    x = document.getElementsByClassName("custom-select");
    l = x.length;
    for (i = 0; i < l; i++) {
      selElmnt = x[i].getElementsByTagName("select")[0];
      ll = selElmnt.length;
      a = document.createElement("DIV");
      a.setAttribute("class", "select-selected");
      a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
      x[i].appendChild(a);
      b = document.createElement("DIV");
      b.setAttribute("class", "select-items select-hide");
      for (j = 1; j < ll; j++) {
        c = document.createElement("DIV");
        c.innerHTML = selElmnt.options[j].innerHTML;
        c.addEventListener("click", function(e) {
          var y, i, k, s, h;
          s = this.parentNode.parentNode.getElementsByTagName("select")[0];
          h = this.parentNode.previousSibling;
          for (i = 0; i < s.length; i++) {
            if (s.options[i].innerHTML == this.innerHTML) {
              s.selectedIndex = i;
              h.innerHTML = this.innerHTML;
              y = this.parentNode.getElementsByClassName("same-as-selected");
              for (k = 0; k < y.length; k++) {
                y[k].removeAttribute("class");
              }
              this.setAttribute("class", "same-as-selected");
              break;
            }
          }
          h.click();
        });
        b.appendChild(c);
      }
      x[i].appendChild(b);
    }
    function selectOption() {
      var x, y, i, l, ll, selElmnt, a, b, c;
      x = document.getElementsByClassName("custom-select");
      l = x.length;
      for (i = 0; i < l; i++) {
        selElmnt = x[i].getElementsByTagName("select")[0];
        a = selElmnt.nextElementSibling;
        b = a.firstElementChild;
        c = a.lastElementChild;
        if (selElmnt.value == "") {
          c.classList.add("select-hide");
          b.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
        } else {
          c.classList.remove("select-hide");
          b.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
        }
      }
    }
    for (i = 0; i < x.length; i++) {
      selElmnt = x[i].getElementsByTagName("select")[0];
      selElmnt.addEventListener("change", selectOption);
      a = selElmnt.nextElementSibling;
      a.addEventListener("click", function(e) {
        e.stopPropagation();
        closeAllSelect(this);
        this.nextSibling.classList.toggle("select-hide");
        this.classList.toggle("select-arrow-active");
      });
    }
    function closeAllSelect(elmnt) {
      var x, y, i, xl, yl, arrNo = [];
      x = document.getElementsByClassName("select-items");
      y = document.getElementsByClassName("select-selected");
      xl = x.length;
      yl = y.length;
      for (i = 0; i < yl; i++) {
        if (elmnt == y[i]) {
          arrNo.push(i)
        } else {
          y[i].classList.remove("select-arrow-active");
        }
      }
      for (i = 0; i < xl; i++) {
        if (arrNo.indexOf(i)) {
          x[i].classList.add("select-hide");
        }
      }
    }
    document.addEventListener("click", closeAllSelect);
  });
</script>

</body>
</html>