select2 doesnt show data

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

Edited post - 2 examples of code how I have tried to do this — Ondra Kovács
I think that this might be an XY problem. As your question doesn't seem to be caused by the select2 plugin. — Alexandre Elshobokshy

Alexandre Elshobokshy Alexandre Elshobokshy · Accepted Answer · 2018-08-30T08:29:28

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.

select2 doesnt show data

2 Answers