J'essaie d'utiliser select2 pour afficher une liste déroulante dans un modal. La liste déroulante ne s'affiche pas comme prévu, voici comment elle s'affiche ci-dessous.
Si je place ma sélection en dehors du modal, cela fonctionne bien, comme ceci
Voici mon code 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>×</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>
3 Réponses :
Je pense que vous devez attacher le menu déroulant au modal. Essayez quelque chose comme ceci:
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> ... <select id="mySelect2"> ... </select> ... </div> ... <script> $('#mySelect2').select2({ dropdownParent: $('#myModal') }); </script>
J'ai obtenu ceci d'ici: https://select2.org/troubleshooting/common-problems
Veuillez lire l'article ci-dessus pour plus d'informations sur ce problème!
<div id="myModal" class="modal fade" role="dialog" aria-hidden="true"> remove tabindex="-1" from modal and then just init select2 like $('.js-example-basic-multiple').select2(); as you did
Lors de l'utilisation de select2 avec bootstrap, ce code situé dans assets / stylesheets / application.scss a tout corrigé pour moi
@import "bootstrap-sprockets"; @import "bootstrap"; @import "select2"; @import "select2-bootstrap";