> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/advanced/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/advanced/select2-lam-la-co-gan-truoc-text-kieu-kool-ngau-ok.md).

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

![](/files/-MQR95jtqa3HZ_uvphHe)

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>
```
