<head>
<link href="select2.css" rel="stylesheet"/>
<script src="select2.js"></script>
<link href="bootstrap.css" rel="stylesheet"/>
<script src="bootstrap.js"></script>
<script>
function format(state) {
if (!state.id) return state.text; // optgroup
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
}
$("#e4").select2({
formatResult: format,
formatSelection: format,
escapeMarkup: function(m) { return m; }
});
</script>
</head>
<body>
<script>
function format(state) {
var originalOption = state.element;
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png' alt='" + $(originalOption).data('foo') + "' />" + state.text;
}
</script>
<select>
<option value="AL" data-foo="bar">option one</option>
<option value="1" data-foo="bar">option</option>
<option value="3" data-foo="bar">option</option>
</select>
</body>
