select2 doesnt show data - jquery-select2

Question

I need to use multiselect so I got idea use select2 tags for that. But I got a problem.. I have rendered multiselect from nette with values.. when I look on html code I can see all options with their values.. but when I enable select2 for that select it says 'No results found' but still in code there are data.. also I wanted to use tags, and also this is not working either .. Any possible solutions guys? Thanks
I'm enabling select2 like this - that select has class 'multiple-regions':
<script>
$(document).ready(function () {
$('.multiple-regions').select2({
tags: true
});
});
</script>
PS: I have included jquery before bootstrap and select2 includes.
EDIT: posting HTML (I'm now using form component from nette but it's same when I use raw HTML)
{form filterRoutesForm}
<div class="row" style="padding: 0 1em;">
<div class="col-md-5">
<div class="form-group">
{label date class=>"form-control-label"/}
{input date class=>"form-control daterange-routes"}
</div>
</div>
<div class="col-md-5">
<div class="form-group">
{label region class=>"form-control-label"/}
{input region class=>"form-control multiple-regions"}
</div>
</div>
<div class="col-md-2">
{input search class=>"btn btn-primary form-control", style=>"margin-top: 35px;"}
</div>
</div>
{/form}
Here is same example with raw HTML:
<select name="region[]" multiple="multiple" class="form-control multiple-regions">
<option value="all">všechny kraje</option>
<option value="1">Praha</option>
<option value="2">Střední Čechy</option>
<option value="3">Jih a západ Čech</option>
<option value="4">Severní Čechy</option>
<option value="5">Východní Čechy</option>
<option value="6">Jižní Morava</option>
<option value="7">Severní Morava</option>
<option value="8">Bratislava</option>
<option value="9">Západní Slovensko</option>
<option value="0">Východní Slovensko</option>
</select>
BTW also I have tried added data as array in 'data' property in select2, but still same effect - No results found

Answer 1

You need to add select2.css, select2.js as well as jquery if that's not already done, add multiple and that's pretty much all you need.
$(document).ready(function () {
$('.multiple-regions').select2({
tags: true,
width: '100%'
});
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<select name="region[]" class="form-control multiple-regions" multiple>
<option value="all">všechny kraje</option>
<option value="1">Praha</option>
<option value="2">Střední Čechy</option>
<option value="3">Jih a západ Čech</option>
<option value="4">Severní Čechy</option>
<option value="5">Východní Čechy</option>
<option value="6">Jižní Morava</option>
<option value="7">Severní Morava</option>
<option value="8">Bratislava</option>
<option value="9">Západní Slovensko</option>
<option value="0">Východní Slovensko</option>
</select>
You could eventually add, if needed, closeOnSelect: false as a select2 argument to prevent it from closing on each select, it's useful for multiple selections.

Answer 2

After a few days for rest I solved it.. Problem was in external .js file - where my colleague defined .select2 style which select2 uses defaulty .. So when I wanted to declare select2 in script his style rewrited it and then it hasn`t data.. Thank you for everything. Cya