select2 не показывает данные - PullRequest
Новая
       29

select2 не показывает данные

0 голосов
/ 30 августа 2018

Мне нужно использовать множественный выбор, поэтому у меня появилась идея использовать для этого теги select2. Но у меня возникла проблема ... Я отобразил множественный выбор из Nette со значениями ... Когда я смотрю на HTML-код, я вижу все параметры с их значениями ... но когда я включаю select2 для этого выбора, он говорит "Результаты не найдены", но все же в коде есть данные .. также я хотел использовать теги, и это тоже не работает .. Какие-нибудь возможные решения, ребята? Спасибо

Я включаю select2 следующим образом - этот выбор имеет класс 'множественные регионы': 

<script>
        $(document).ready(function () {
            $('.multiple-regions').select2({
                tags: true
            });
        });
</script>

PS: я включил jquery перед загрузкой, а select2 включает.

РЕДАКТИРОВАТЬ: публикация HTML (сейчас я использую компонент формы из nette, но то же самое, когда я использую необработанный 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}

Вот тот же пример с необработанным 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>

Кстати, я также попытался добавить данные в виде массива в свойстве data в select2, но тот же эффект - результатов не найдено

Ответы [ 2 ]

0 голосов
/ 03 сентября 2018

После нескольких дней отдыха я решил это .. Проблема была во внешнем файле .js - где мой коллега определил стиль .select2, который select2 использует по умолчанию. Поэтому, когда я хотел объявить select2 в скрипте, его стиль переписал его, а затем это не данные .. Спасибо за все. Cya

0 голосов
/ 30 августа 2018

Вам нужно добавить select2.css, select2.js, а также jquery, если это еще не сделано, добавьте multiple, и это почти все, что вам нужно. 

$(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>

Вы можете в конечном итоге добавить, если необходимо, closeOnSelect: false в качестве аргумента select2, чтобы предотвратить его закрытие при каждом выборе, это полезно для множественного выбора.

...