Bandeira Imagem em Select Option

Bandeira Imagem em Select Option

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>

	<label for="brand">Bandeira do Cartão</label>
	<select id="frm_brand" required style="width:100%;">
		<option value="" selected>Selecione um bandeira</option>							
		<option value="visa">Visa</option>
		<option value="mastercard">MasterCard</option>
		<option value="jcb">JCB</option>
		<option value="diners">Diners</option>
		<option value="amex">Amex</option>
		<option value="elo">Elo</option>
		<option value="aura">Aura</option>
	</select>
<script>

	function formatState (state) {
	  if (!state.id) {
		return state.text;
	  }
	  var baseUrl = "img"; //Na pasta em questão adicione as imagens. Cada imagem deverá ter o nome igual ao value correspodente no option
	  var $state = $(
		'<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
	  );
	  return $state;
	};

	$("#frm_brand").select2({
		templateResult: formatState
	});

</script>

<style>
.img-flag
{
	width:25px
}
</style>