能否在HTML的Option标签内嵌套其他HTML元素？

原生HTML的<option>标签不支持嵌套<div>、图标组件这类复杂DOM元素，浏览器渲染时会自动过滤掉这些非文本内容，只保留纯文本，所以你添加的图标会被丢弃，仅显示默认样式的文字。

放弃原生<select>+<option>的组合，改用自定义下拉组件，以下是两种常见方案：

方案1：使用第三方组件库（推荐） #

比如react-select，它支持自定义选项内容，能轻松实现图标+文本的组合效果，示例代码如下：

import Select from 'react-select';

// 自定义选项渲染组件
const CustomOption = ({ label, icon }) => (
  <div className='flex justify-between items-center'>
    {icon}
    <p>{label}</p>
  </div>
);

// 选项数据
const options = [
  { value: 'my_option', label: 'My Option', icon: <SomeIcon className='w-4' /> }
];

// 使用组件
<Select
  options={options}
  components={{ Option: CustomOption }}
/>

方案2：手写自定义下拉组件 #

用<div>模拟下拉框，完全自定义样式和内容，示例思路代码：

import { useState } from 'react';

const CustomDropdown = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedValue, setSelectedValue] = useState('');

  return (
    <div className='relative'>
      {/* 下拉触发框 */}
      <div 
        className='border p-2 cursor-pointer'
        onClick={() => setIsOpen(!isOpen)}
      >
        {selectedValue || '请选择'}
      </div>
      {/* 选项列表 */}
      {isOpen && (
        <div className='absolute top-full left-0 border w-full'>
          <div 
            className='flex justify-between items-center p-2 hover:bg-gray-100 cursor-pointer'
            onClick={() => {
              setSelectedValue('My Option');
              setIsOpen(false);
            }}
          >
            <SomeIcon className='w-4' />
            <p>My Option</p>
          </div>
        </div>
      )}
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Refilwe M. Mashile