1

Tenho um site e preciso colocar um seletor de idiomas nele, quando o usuário selecionar a bandeira correspondente ao idioma desejada ser redirecionado para uma url especifica.

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

No caso do exemplo do código acima ao invés dos nomes eu quero a bandeira dentro, já tentei inserir a imagem diretamente mas não aparece, e depois de selecionado ser redirecionado para uma URL mencionado, eu sei que é com javascript que fazz isso, só não sei como, alguém pode ajudar?

3 Respostas 3

3

Ao invés de usar a tag "select", podes utilizar como se fosse uma lista, resolveria o seu problema. Olhe abaixo:

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

Você pode usar o Flagstrap que faz exatamente o que você deseja, ou ainda usar o Countries dropdown with flags que também atende suas necessidades.

1

O select do HTML não suporta isso nativamente, você não consegue customizar o html interno do select

Para fazer o que você deseja são usados plugins que montam elementos que parecem selects e fazem a mesma coisa que os selects fazem porém sendo customizáveis, um deles é o select2 que você pode ver funcionando no jsfiddle e aqui vários outros exemplos de como usá-lo

Basicamente você monta um template para que o 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
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .