如何將jQuery select2庫集成到Symfony3表單中？

我試圖手動將jQuery select2庫整合到我的Symfony表單中，作爲我的選擇框的替代品。如何將jQuery select2庫集成到Symfony3表單中？

繼我已經加入到網頁標題中的手冊：

<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') 
))

我修改嫩枝模板：

{{ 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">

能否請您指教一下我做錯了什麼？

來源

2016-02-19 Abdel5

您有任何控制檯輸出？小寫腳本標記 –

控制檯爲空。 – Abdel5

你是否嘗試過直接在非Symfony生成的選擇框上查看HTML是否正常工作？你確定它不工作？基本示例看起來與正常選擇框非常相似。 –

試試這個

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

來源

2016-02-19 23:15:41 fcpauldiaz

就像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>

來源

2016-02-20 05:49:30 buphmin

如何將jQuery select2庫集成到Symfony3表單中？

回答

相關問題