如何创建顶部带静态文本、下拉显示按钮的类ComboBox组件？

需求说明 #

想要创建的组件视觉效果如下：

需要实现一个类似ComboBox的组件，但有以下特殊需求：

• 组件顶部显示静态文本，点击后下拉展示若干按钮
• 直接改造ComboBox存在无法解决的问题，希望找到最优实现方式

推荐实现方案 #

方案1：原生HTML+CSS+JS自定义组件（无框架依赖） #

这种方式完全可控，没有原生ComboBox的限制，灵活性最高。

结构代码

<div class="custom-dropdown">
  <div class="dropdown-trigger">静态文本（如"操作选项"）</div>
  <div class="dropdown-menu">
    <button class="dropdown-btn">按钮1</button>
    <button class="dropdown-btn">按钮2</button>
    <button class="dropdown-btn">按钮3</button>
  </div>
</div>

样式代码

.custom-dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-trigger {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
  min-width: 120px;
  text-align: left;
}

.dropdown-trigger:hover {
  border-color: #888;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: none;
  z-index: 100;
}

.dropdown-btn {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}

.dropdown-btn:hover {
  background: #f5f5f5;
}

.custom-dropdown.active .dropdown-menu {
  display: block;
}

交互逻辑

const dropdown = document.querySelector('.custom-dropdown');
const trigger = dropdown.querySelector('.dropdown-trigger');

trigger.addEventListener('click', () => {
  dropdown.classList.toggle('active');
});

// 点击外部关闭下拉
document.addEventListener('click', (e) => {
  if (!dropdown.contains(e.target)) {
    dropdown.classList.remove('active');
  }
});

方案2：框架组件组合（React/Vue示例） #

如果是框架项目，可利用框架状态管理实现：

React示例

import { useState, useRef, useEffect } from 'react';

function CustomDropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (e) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
        setIsOpen(false);
      }
    };
    document.addEventListener('click', handleClickOutside);
    return () => document.removeEventListener('click', handleClickOutside);
  }, []);

  return (
    <div className="custom-dropdown" ref={dropdownRef}>
      <div className="dropdown-trigger" onClick={() => setIsOpen(!isOpen)}>
        静态文本
      </div>
      {isOpen && (
        <div className="dropdown-menu">
          <button className="dropdown-btn">按钮1</button>
          <button className="dropdown-btn">按钮2</button>
        </div>
      )}
    </div>
  );
}

方案3：原生details/summary快速实现 #

如果只需要基础功能，原生标签可快速搭建，无需额外JS：

<details class="custom-details">
  <summary class="dropdown-trigger">静态文本</summary>
  <div class="dropdown-menu">
    <button class="dropdown-btn">按钮1</button>
    <button class="dropdown-btn">按钮2</button>
  </div>
</details>

.custom-details summary {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
  list-style: none;
}

.custom-details summary::-webkit-details-marker {
  display: none;
}

.custom-details .dropdown-menu {
  margin-top: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 4px 0;
}

不推荐改造ComboBox的原因 #

原生ComboBox（<select>）的结构和样式受浏览器限制极大：无法直接将下拉选项替换为按钮，自定义样式兼容性差，交互逻辑的自定义空间极小，远不如完全自定义组件灵活可控。

内容的提问来源于stack exchange，提问作者Jess Chan