如何将 jQuery select2 库集成到 Symfony3 表单中？答案

【问题标题】：How to integrate jQuery select2 library into a Symfony3 form?如何将 jQuery select2 库集成到 Symfony3 表单中？
【发布时间】：2016-02-19 19:29:18
【问题描述】：

我正在尝试将 jQuery select2 库手动集成到我的 Symfony 表单中，以替代我的选择框。

按照我添加到页眉的手册：

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

另外我修改了我的表单类，在每个选择中添加attr：

->add('kontoWinien', EntityType::class, array(
    'class' => 'AppBundle\Entity\konto',
    'attr' => array('class'=>'select2')
))

我修改后的 Twig 模板：

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

但是select2 仍未加载。

symfony3 生成的 HTML 代码如下所示：

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

<form name="dziennik" method="post">
<script type="text/javascript">
    $(document).ready(function() {
        $(".select2").select2();
    });
</script>

<select id="dziennik_kontoWinien" name="dziennik[kontoWinien]" class="select2 form-control">

你能告诉我我做错了什么吗？

【问题讨论】：

你有控制台输出吗？小写脚本标签
你有没有在非 Symfony 生成的选择框上尝试直接使用 HTML 来查看它是否正常工作？你确定它不工作？基本示例看起来与普通选择框非常相似。
你在选择资产之前加载了 jQuery 吗？

标签： jquery-select2 symfony

【解决方案1】：

就像 fcpauldiaz 所说，您需要事先加载 jquery。我把你的代码加载了 jquery（和一些选项，所以我们可以看到它工作），它工作正常。

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
  <!-- Loading jquery here--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
</head>

<form name="dziennik" method="post">
  <script type="text/javascript">
    $(document).ready(function() {
      $(".select2").select2();
    });
  </script>

  <select id="dziennik_kontoWinien" name="dziennik[kontoWinien]" class="select2 form-control">
    <option value="test1">test1</option>
    <option value="test2">test2</option>
  </select>

【讨论】：

【解决方案2】：

试试这个

 <script type="text/javascript">
     $('select').select2();
 </script>

【讨论】：