select2 does not display correctly (Using cdn)

I’m trying to complete my website with some java’s plugin, I’m on Symfony 4 and I use the CDN bootstrap twitter.

When I put the select2 plugin into the templates all is working properly, the select2 plugin does apply correctly.

However I don’t want to load select2 directly from the templates I want to run it from app.js but it didn’t work properly, the select2 plugin is activated but it’s weird, I’ll show you the result below.

There is my app.js code:

let $ = require('jquery');

require('../css/app.css');
require('select2');

$('select').select2();


console.log('Hello Webpack Encore! Edit me in assets/js/app.js');

I’m sorry for my bad English, I’ll thank you all for reading my post to the end!

Answer

You need to add 3 of the following references

$('select').select2({ width: '100%', placeholder: "Select an Option", allowClear: true });

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


<select id='myselect'>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>

</select>