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