[SELECT2] Common problems Select2 does not function properly when I use it inside a Bootstrap modal

https://select2.org/troubleshooting/common-problems

C:\xampp\htdocs\elasticsearch\index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="myModal" class="container" tabindex="-1" role="dialog" aria-hidden="true">
      <select id="mySelect2">
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
      </select>
  </div>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#mySelect2').select2({
        dropdownParent: $('#myModal')
      });
    });
  </script>
</body>
</html>

Previous[SELECT2] Hiểu submit trong javascript và nâng cấp sử dụng select 2, autocomplate (ok)Next[SELECT2] Full Events (ok)

Last updated 3 years ago