Symfony表单技术问询：实现带复选框的下拉多选组件

哈哈，我完全懂你的痛点！Symfony原生的choice/entity类型里，multiple=true搭配expanded=false虽然是多选，但默认是那种需要按住Ctrl才能多选的原生下拉，而expanded=true又会变成平铺的复选框组，完全不是你想要的那种下拉展开带复选框的多选菜单对吧？别担心，有几个靠谱的方案可以解决：

方案1：集成前端多选下拉库（比如Select2） #

这是最常用的低成本方案，靠前端库把原生多选下拉转换成带复选框的交互样式：

1. 调整表单代码，添加标识类
   先保持多选配置，给字段加个专属类名方便JS定位（顺便提一句，Symfony 3+推荐用ChoiceType::class代替字符串'choice'哦）：

use Symfony\Component\Form\Extension\Core\Type\ChoiceType;

$form = $this->createFormBuilder()
    ->add('features', ChoiceType::class, [
        'choices' => ['a' => 'a', 'b' => 'b', 'c' => 'c'],
        'multiple' => true,
        'attr' => ['class' => 'multi-select-checkbox'] // 添加这个类
    ])
    ->getForm();

2. 引入前端库并初始化
   在你的Twig模板里引入Select2的CSS和JS，然后初始化字段：

{# 放在模板的<head>或页面底部 #}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.multi-select-checkbox').forEach(el => {
        $(el).select2({
            placeholder: "请选择特性",
            allowClear: true,
            closeOnSelect: false, // 选中选项后不关闭下拉，方便连续多选
            templateResult: function(option) {
                // 自定义选项渲染，显示复选框
                if (!option.id) {
                    return option.text;
                }
                return $(`<span><input type="checkbox" class="select2-checkbox"> ${option.text}</span>`);
            }
        });
    });
});
</script>

这样渲染出来的就是你想要的：点击下拉展开带复选框的选项，选中后会在输入框显示已选标签，体验非常友好。

方案2：用Symfony UX官方组件（推荐给Symfony 5+用户） #

如果你用的是较新版本的Symfony，官方的Symfony UX系列里有个Tom Select组件，集成起来更顺畅，不需要自己写太多自定义JS：

1. 先安装组件

# 安装PHP包
composer require symfony/ux-tom-select
# 安装前端依赖并构建
npm install
npm run watch

2. 在表单里直接使用

use Symfony\UX\TomSelect\Form\Type\TomSelectType;

$form = $this->createFormBuilder()
    ->add('features', TomSelectType::class, [
        'choices' => ['a' => 'a', 'b' => 'b', 'c' => 'c'],
        'multiple' => true,
        'tom_select_options' => [
            'placeholder' => '请选择特性',
            'plugins' => ['checkbox_options'], // 启用复选框插件
            'closeOnSelect' => false,
        ],
    ])
    ->getForm();

这个组件会自动渲染带复选框的下拉菜单，还自带移除已选选项的按钮，和Symfony表单的兼容性拉满，不用自己操心样式和JS初始化。

方案3：自定义可复用表单类型（进阶） #

如果你的项目里很多地方都需要这种字段，可以封装成自定义表单类型，避免重复代码：

// src/Form/Type/MultiSelectChoiceType.php
namespace App\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormView;
use Symfony\Component\OptionsResolver\OptionsResolver;

class MultiSelectChoiceType extends AbstractType
{
    public function buildView(FormView $view, FormInterface $form, array $options)
    {
        // 自动给字段添加标识类
        $existingClass = $view->vars['attr']['class'] ?? '';
        $view->vars['attr']['class'] = trim($existingClass . ' multi-select-checkbox');
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'multiple' => true,
            'expanded' => false,
        ]);
    }

    public function getParent()
    {
        return ChoiceType::class;
    }
}

之后在表单里直接用MultiSelectChoiceType::class代替ChoiceType::class，再在全局模板里初始化Select2/Tom Select，就能在所有地方复用这个字段啦。

要说明的是：Symfony原生表单组件并没有内置这种“下拉带复选框”的类型，因为这本质是前端交互增强，所以必须依赖前端库来实现上面的效果~

内容的提问来源于stack exchange，提问作者Teshan N.