前端使用html+js+css实现一个弹出选择框

以下是一个使用HTML、JavaScript和CSS实现的简单弹出选择框的示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Select Box</title>
<style>
  .select-box {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    padding: 10px;
    z-index: 10;
  }
  .select-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .select-box ul li {
    padding: 5px 10px;
    cursor: pointer;
  }
  .select-box ul li:hover {
    background-color: #eee;
  }
</style>
</head>
<body>
 
<div class="trigger">点击这里弹出选择框</div>
<div class="select-box">
  <ul>
    <li>选项 1</li>
    <li>选项 2</li>
    <li>选项 3</li>
    <li>其他选项</li>
  </ul>
</div>
 
<script>
document.querySelector('.trigger').onclick = function() {
  var selectBox = document.querySelector('.select-box');
  selectBox.style.display = 'block';
  
  // 添加点击其他位置关闭选择框的事件监听
  document.addEventListener('click', function(e) {
    if(e.target !== selectBox && !selectBox.contains(e.target)) {
      selectBox.style.display = 'none';
      document.removeEventListener('click', arguments.callee);
    }
  });
};
 
// 选项点击事件
document.querySelectorAll('.select-box ul li').forEach(function(item) {
  item.onclick = function() {
    alert('你选择了: ' + item.textContent);
    document.querySelector('.select-box').style.display = 'none';
  };
});
</script>
 
</body>
</html>

这个示例包括了一个简单的弹出选择框，点击触发元素会显示选择框，选择一个选项后会弹出提示框，并关闭选择框。点击非选择框区域外任何地方都会关闭选择框。这个例子提供了一个基本框架，可以根据实际需求进行扩展和定制。

前端使用html+js+css实现一个弹出选择框

评论已关闭

推荐阅读