从MySQL按车型级别分组生成optgroup下拉框，实现点击展开组内车型

核心结论：原生optgroup不支持点击展开/折叠 #

原生HTML的<optgroup>仅用于对下拉选项进行分组展示，本身没有点击展开或折叠的交互能力。要实现你需要的点击分组名展开选项的效果，必须借助JavaScript模拟交互，或者使用自定义的下拉组件。

先修正你的PHP+SQL代码（确保基础分组逻辑正确） #

你当前的SQL存在语法错误（GROUP BY必须放在WHERE语句之后），且数据查询逻辑不合理，GROUP_CONCAT(b.model_class_name)完全没必要。以下是修正后的代码，先保证能正确按车型级别分组输出数据：

修正后的SQL与PHP代码 #

// 修正SQL语句：调整WHERE与GROUP BY顺序，按分类名+车型名排序
$stmt = $pdo->prepare("
    SELECT d.model_class_name, b.model_id, b.model_name
    FROM tbl_model b 
    JOIN tbl_car c ON b.model_id = c.model_id 
    JOIN tbl_model_class d ON b.model_id = d.model_id 
    WHERE b.brand_id = ? 
    ORDER BY d.model_class_name ASC, b.model_name ASC
");
$stmt->execute([$id]);
$models = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 将查询结果按车型级别分组整理
$groupedModels = [];
foreach ($models as $model) {
    $className = $model['model_class_name'];
    if (!isset($groupedModels[$className])) {
        $groupedModels[$className] = [];
    }
    $groupedModels[$className][] = [
        'id' => $model['model_id'],
        'name' => $model['model_name']
    ];
}

// 输出带optgroup的原生下拉框（先实现基础分组，再添加展开逻辑）
echo '<select id="carModelSelect">';
foreach ($groupedModels as $class => $items) {
    echo '<optgroup label="' . htmlspecialchars($class) . '">';
    foreach ($items as $item) {
        echo '<option value="' . htmlspecialchars($item['id']) . '">' . htmlspecialchars($item['name']) . '</option>';
    }
    echo '</optgroup>';
}
echo '</select>';

注意：使用htmlspecialchars()避免XSS注入风险，这是前端输出数据时的必要操作。

实现optgroup点击展开/折叠的两种方案 #

方案1：纯JS模拟自定义下拉组件 #

放弃原生<select>，用HTML+CSS+JS手动实现下拉结构。示例结构如下：

<div class="custom-select">
    <div class="select-trigger">请选择车型</div>
    <div class="select-options">
        <div class="optgroup">
            <div class="optgroup-label">3 serial</div>
            <div class="optgroup-options">
                <div class="option" data-value="xxx">318</div>
                <div class="option" data-value="xxx">320</div>
            </div>
        </div>
        <!-- 更多分组 -->
    </div>
</div>

然后编写JavaScript监听optgroup-label的点击事件，切换optgroup-options的display属性（如block/none），同时处理选中状态的同步逻辑。

方案2：使用成熟UI组件库 #

市面上的前端UI组件库（如Element UI、Ant Design等）的下拉组件大多自带分组展开/折叠功能，你只需将PHP输出的分组数据传入组件即可快速实现需求。

总结 #

1. 原生<optgroup>无法实现点击展开，必须依赖前端自定义交互。
2. 先修正后端的分组查询逻辑，确保数据按车型级别正确归类。
3. 根据项目技术栈选择纯JS自定义或UI组件库的方案实现展开折叠效果。

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