Как я могу добавить select2 динамическое поле выбора внутри цикла while? - PullRequest
Новая
       64

Как я могу добавить select2 динамическое поле выбора внутри цикла while?

0 голосов
/ 30 октября 2019

Я пытаюсь поместить блок Select2 в цикл while. Но работает только первый тег выбора. Хотя цикл работает нормально, тег select не работает после первого 1. Как я могу исправить эту проблему?

Я также попытался добавить печать уникального идентификатора PHP, чтобы исправить это. но ничего не произошло. 

<select type="text" name="city" id="city-<?php echo $id; ?>" class="form-control"></select>

Это часть javascript: 

<script type="text/javascript">
$('#city-<?php echo $id; ?>').select2({
    placeholder: 'Select city',
    ajax: {
        url: 'processes/cities.php',
        dataType: 'json',
        delay: 250,
        processResults: function (data) {
            return {
                results: data
            };
        },
        cache: true
    }
});
</script>

Я ожидаю, что все поля выбора будут работать нормально. Но на самом деле работает только первая 1.

1 Ответ

0 голосов
/ 01 ноября 2019

Было бы полезно, если бы вы предоставили цикл в своем примере кода. Наиболее вероятная проблема заключается в том, что ваши идентификаторы не являются уникальными. Если у вас есть несколько тегов с одинаковым идентификатором, то JavaScript будет распознавать только первый. Вот пример для демонстрации.

https://jsfiddle.net/n8vxjoc1/1/

<div id="city-1">Content</div>
<div id="city-1">Content</div>
<script>
  jQuery( '#city-1' ).html( jQuery( '#city-1' ).length );
</script>

Изменится только 1-й элемент, и он будет отображать число 1.

Из спецификаций W3C:

Атрибут id задает уникальный идентификатор (ID) своего элемента.

https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

Вы должны назначить выпадающим спискам класс и цель, которые вместо этого,Например,

https://jsfiddle.net/n8vxjoc1/1/

<select name="city" class="select2 form-control">…</select>
<select name="city" class="select2 form-control">…</select>
<script type="text/javascript">
  $('select.select2').select2({});
</script>
...