How to make language selector

Question

I have a website and need to put a language selector on it, when the user selects the flag corresponding to the desired language to be redirected to a specific url.

 <select>
   <option>Brazil</option>
   <option>English</option>
   <option>spanish</option>
</select>

In the case of the above code example instead of the names I want the flag inside, I have tried to insert the image directly but it does not appear, and after selected be redirected to a mentioned URL, I know it is with javascript that you do this, just do not know how, someone can help?

Answer 1

Instead of using the "select" tag, you can use it as a list, it would solve your problem. Look below:

<ul>
  <li><a href="http://redirecionaparabandeira"><img src="imagemBandeira" /></a></li>
   ....
</ul>

Answer 2

You can use the Flagstrap that does exactly what you want, or still use the Countries dropdown with flags that also meets your needs.

Answer 3

The select HTML does not support this natively, you cannot customize the internal html of select

To do what you want are used plugins that assemble elements that seem selects and do the same thing that selects do but being customizable, one of them is the Select2 that you can see working on jsfiddle and here several other examples of how to use it

Basically you assemble a template so that the loope Select2

function formatState (state) {
  if (!state.id) { return state.text; }
  var $state = $(
    '<span><img src="bandeiras/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
  );
  return $state;
};

$(".meu-select").select2({
  templateResult: formatState
});