用HTML+css+js写个下拉选择框

下面是一个简单的下拉选择框的 HTML+CSS+JS 代码：

HTML：

<div class="dropdown">
  <button class="dropbtn">选择一个选项</button>
  <div class="dropdown-content">
    <a href="#">选项1</a>
    <a href="#">选项2</a>
    <a href="#">选项3</a>
  </div>
</div>

CSS：

/* 下拉选择框按钮样式 */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* 下拉选择框容器样式，隐藏下拉内容 */
.dropdown {
  position: relative;
  display: inline-block;
}

/* 下拉选择框内容样式 */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  z-index: 1;
}

/* 下拉选择框内容链接样式 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* 当鼠标移动到下拉内容链接时，添加背景色 */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* 展开下拉内容 */
.show {
  display: block;
}

JS：

// 获取下拉选择框容器
var dropdown = document.getElementsByClassName("dropdown");

// 循环遍历下拉选择框容器
for (var i = 0; i < dropdown.length; i++) {
  // 添加点击事件
  dropdown[i].addEventListener("click", function() {
    // 切换下拉内容的显示状态
    this.classList.toggle("active");
    var dropdownContent = this.querySelector(".dropdown-content");
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

运行以上代码，即可看到一个简单的下拉选择框。你可以根据自己的需求修改样式和选项。