How to make language selector

Question

How to make language selector

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (1 votes)

1

I have a website and I 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 case of example code above instead of names I want the flag inside, I already tried to insert the image directly but it does not appear, and after selected is redirected to a URL mentioned, I know it's with javascript that fazz this , just do not know how, can anyone help?

javascript css html-select

asked by anonymous 23.02.2016 / 18:16

3 answers

3

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

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

23.02.2016 / 19:02

2

You can use the Flagstrap that does exactly what you want, or even use Countdown dropdown with flags that also suits your needs.

23.02.2016 / 18:26

How to "transform" a specific commit into a branch? Update the echo on a page every minute

score 1 · Accepted Answer

% wc% does not support this natively, you can not customize the internal html of select

To do what you want are plugins that build elements that look like select and do the same thing that the selects do however being customizable, one of them is select2 that you can see working in jsfiddle and here are some other examples of how to use it

Basically you mount a template so that select2 loope

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
});