Input with states of brazil and when selecting to show cities of this state

Question

Input with states of brazil and when selecting to show cities of this state

Navigation

#1 by (1 votes)

-2

Well, basically I have the following code with all the states of Brazil.

<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>

What I intended was to do a javascript that when selecting one of the states, it would appear all the cities of that state in the select "cities". In other words, depending on the option state school, it will display different values in select cities.

How can I do this?

javascript html

asked by anonymous 31.03.2016 / 05:26

1 answer

Best practice for Mass Assignment User dashboards logged in using django admin user

score 1 · Answer 1

Select Rondônia, Maranhão or São Paulo. It's just an example of how you could proceed, seeing that cities are not as well defined as states, and there are thousands.

$('[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><selectname="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>