Select2 не отображается должным образом в модале начальной загрузки - PullRequest
Новая
       11

Select2 не отображается должным образом в модале начальной загрузки

1 голос
/ 10 мая 2019

Я пытаюсь использовать select2 для отображения выпадающего в модальном. Раскрывающийся список не отображается должным образом, как показано ниже.

What it shows

Если я размещу свой Select за пределами модального режима, он будет работать нормально, как это

This is what should show on the modal

Вот мой HTML-код: 

<div class='modal fade' id='comm".$row[' issue_id ']."'>
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title'>Add Comments</h5>
        <button type='button' class='close' data-dismiss='modal'><span>&times;</span></button>
      </div>
      <div class='modal-body'>
        <p>Add Comments to this Incident</p>
        <form method='post' action='processing.php'>
          <textarea type='text' cols='40' name='comments' required></textarea>
          <input type='hidden' name='issue_id' value='".$row[' issue_id ']."'><br>
          <input type='hidden' name='url' value='".$url."'><br>
          <select class='js-example-basic-multiple' name='tag[]' multiple='multiple'>
            <option value='AL'>Alabama</option>
            <option value='WY'>Wyoming</option>
          </select>
          <br><button type='submit' class='btn btn-primary' name='submit_comm'>Submit</button>
        </form><br>
      </div>
      <div class='modal-footer'>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('.js-example-basic-multiple').select2();
    });
</script>

1 Ответ

0 голосов
/ 11 мая 2019

Я думаю, вам нужно прикрепить выпадающий список к модалу.Попробуйте что-то вроде этого: 

 <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    ...
    <select id="mySelect2">
        ...
    </select>
    ...
</div>

...

<script>
    $('#mySelect2').select2({
        dropdownParent: $('#myModal')
    });
</script>

Я получил это здесь: https://select2.org/troubleshooting/common-problems

Пожалуйста, прочитайте статью выше для получения дополнительной информации об этой проблеме!

...