js 模拟select下拉框

在前端开发中，<select> 元素用于创建下拉列表，用户可以从预定义的选项中进行选择。有时，开发者可能需要自定义下拉框的样式或功能，这时候可以通过 JavaScript 和 CSS 来模拟一个 select 下拉框。

基础概念

模拟 select 下拉框通常涉及创建一个自定义的下拉组件，这个组件包含一个触发元素（通常是一个按钮或者一个带有箭头的框）和一个显示选项的列表。当用户点击触发元素时，选项列表会显示或隐藏，用户可以选择一个选项。

类型

基础下拉框：简单的显示和隐藏选项列表。
可搜索下拉框：允许用户输入文本来过滤选项。
多选下拉框：允许用户选择多个选项。

应用场景

表单设计：在需要用户输入信息的表单中使用。
数据筛选：在数据列表上方提供筛选选项。
设置菜单：在应用程序的设置界面中提供选项菜单。

实现示例

以下是一个简单的自定义下拉框的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Select Dropdown</title>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<div class="dropdown">
  <button class="dropbtn">Select Option</button>
  <div class="dropdown-content">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

</body>
</html>