如何在 Symfony 3 中集成 Select2 JS

Question

我将向你展示如何将Select2 集成到 Symfony3 项目中！

首先，将这 3 个链接添加到 base.html.twig 页面。

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<link href ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

第二，在CompanyType.php添加：

 use Symfony\Bridge\Doctrine\Form\Type\EntityType;

 class CompanyType extends AbstractType  {
     /**
      * @param FormBuilderInterface $builder
      * @param array $options
      */
     public function buildForm(FormBuilderInterface $builder, array $options)
     {
  $builder
        ->add('country',EntityType::class, array(
                 'attr'=>array('class'=>"country",),
                 'label'=>'Country of The Head fice',                     

                  'choices_as_values' => true, //               
                 'class' => 'QSCORBundle\Entity\CountryMaps',
                 'choice_label' => 'Country_Name',
 
             ))

    ->add(...)  
}
  ...
 }

之后，在你的实体文件Country.php 上添加：

public function __toString()
    {
        // TODO: Implement __toString() method.

       return $this->getCountryName();
    }

最后，在您的模板文件xxx.html.twig 中写下：

<script type="text/javascript">
                $(document).ready(function() {
                        $(".country").select2();
                });
</script>
{{ form_widget(form.country)}}

这是它的外观图片：

Answer 1

您也可以通过将数据属性添加到表单构建器元素，然后将全局 JavaScript 文件包含到您的站点中来处理 select2，无需将其添加到每个 twig 文件中。

p>

例如；

$builder
    ->add('country', 'entity', [
        'class' => 'EntityType::class',
        'label'=>'Country of The Head fice',
        'choices_as_values' => true, //               
        'class' => 'QSCORBundle\Entity\CountryMaps',
        'choice_label' => 'Country_Name',
        'attr' => ['data-select' => 'true']
]);

然后在站点范围的 js 文件中添加；

$('select[data-select="true"]').select2();

这样，任何具有data-select="true" 数据属性的选择都将应用select2。