[SELECT2] làm lá cờ gắn trước text kiểu kool ngầu (ok)

https://select2.github.io/select2/

C:\xampp\htdocs\php\lang.php

<!DOCTYPE html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
  <base href="https://select2.github.io/select2/">
  <style type="text/css">
    .flag {
      width: 15px;
      height: 15px;
      margin-right: 5px;
    }
  </style>
</head>

<body>
  <select id="e4" style="width: 300px;">
    <optgroup label="Alaskan/Hawaiian Time Zone">
      <option value="AK">Alaska</option>
      <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
      <option value="CA">California</option>
      <option value="NV">Nevada</option>
      <option value="OR">Oregon</option>
      <option value="WA">Washington</option>
    </optgroup>
  </select>
  <script type="text/javascript">
    jQuery(document).ready(function($) {
      function format(state) {
        if (!state.id) return state.text;
        return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
      }
      $("#e4").select2({
        templateResult: format,
        templateSelection: format,
        escapeMarkup: function(m) {
          return m;
        }
      });
    });
  </script>
</body>

</html>

Previous[SELECT2] Can thiệp vào templateResult (ok)Next[SELECT2] cam thiệp vào templateSelection (ok)

Last updated 3 years ago