-2

Bom, basicamente eu tenho o seguinte código com todos os Estados do Brasil.

<select name="estado"> 
    <option value="estado">Selecione o Estado</option> 
    <option value="ac">Acre</option> 
    <option value="al">Alagoas</option> 
    <option value="am">Amazonas</option> 
    <option value="ap">Amapá</option> 
    <option value="ba">Bahia</option> 
    <option value="ce">Ceará</option> 
    <option value="df">Distrito Federal</option> 
    <option value="es">Espírito Santo</option> 
    <option value="go">Goiás</option> 
    <option value="ma">Maranhão</option> 
    <option value="mt">Mato Grosso</option> 
    <option value="ms">Mato Grosso do Sul</option> 
    <option value="mg">Minas Gerais</option> 
    <option value="pa">Pará</option> 
    <option value="pb">Paraíba</option> 
    <option value="pr">Paraná</option> 
    <option value="pe">Pernambuco</option> 
    <option value="pi">Piauí</option> 
    <option value="rj">Rio de Janeiro</option> 
    <option value="rn">Rio Grande do Norte</option> 
    <option value="ro">Rondônia</option> 
    <option value="rs">Rio Grande do Sul</option> 
    <option value="rr">Roraima</option> 
    <option value="sc">Santa Catarina</option> 
    <option value="se">Sergipe</option> 
    <option value="sp">São Paulo</option> 
    <option value="to">Tocantins</option> 
</select>
<br>
<select name="cidades">
<option value="cidade1">Cidade 1</option> 
</select>

O que pretendia era fazer um javascript que ao selecionar um dos estados, aparecesse todas as cidades desse estado no select "cidades". Ou seja dependendo da escola do option estado, exibirá valores diferentes no select cidades.

Como poderei fazer isso?

5

1 Resposta 1

1

Selecione Rondônia, Maranhão ou São Paulo. É só um exemplo de como você poderia proceder, vendo que as cidades não são tão bem definidas como os estados, e são milhares.

$('[name="estado"]').click(function(){

// ocultando todas
$('[name="cidades"] option').css('display', 'none');
 
// exibindo as do estado selecionado
$('[name="cidades"] .' + $(this).val()).css('display', '');

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<select name="estado"> 
    <option value="estado">Selecione o Estado</option> 
    <option value="ac">Acre</option> 
    <option value="al">Alagoas</option> 
    <option value="am">Amazonas</option> 
    <option value="ap">Amapá</option> 
    <option value="ba">Bahia</option> 
    <option value="ce">Ceará</option> 
    <option value="df">Distrito Federal</option> 
    <option value="es">Espírito Santo</option> 
    <option value="go">Goiás</option> 
    <option value="ma">Maranhão</option> 
    <option value="mt">Mato Grosso</option> 
    <option value="ms">Mato Grosso do Sul</option> 
    <option value="mg">Minas Gerais</option> 
    <option value="pa">Pará</option> 
    <option value="pb">Paraíba</option> 
    <option value="pr">Paraná</option> 
    <option value="pe">Pernambuco</option> 
    <option value="pi">Piauí</option> 
    <option value="rj">Rio de Janeiro</option> 
    <option value="rn">Rio Grande do Norte</option> 
    <option value="ro">Rondônia</option> 
    <option value="rs">Rio Grande do Sul</option> 
    <option value="rr">Roraima</option> 
    <option value="sc">Santa Catarina</option> 
    <option value="se">Sergipe</option> 
    <option value="sp">São Paulo</option> 
    <option value="to">Tocantins</option> 
</select>
<br>
<select name="cidades">
<option class="ma" value="cidade1">Cidade 1</option> 
  <option class="ma" value="cidade1">Cidade 2</option> 
  <option class="sp" value="cidade1">Cidade 3</option> 
  <option class="ro"  value="cidade1">Cidade 4</option> 
  <option class="ro" value="cidade1">Cidade 5</option> 
  <option class="ma" value="cidade1">Cidade 6</option> 
  <option class="sp" value="cidade1">Cidade 7</option> 
  <option class="ro" value="cidade1">Cidade 8</option> 
  <option class="sp" value="cidade1">Cidade 9</option> 
</select>

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 .