Select Encadeado

Select encadeado

by Rapha Souza

HTML

<select name="estado"> 
    <option value="estado">Selecione o Estado</option> 
    <option value="12">Acre</option> 
 <option value="27">Alagoas</option> 
 <option value="16">Amapá</option> 
 <option value="13">Amazonas</option> 
 <option value="29">Bahia</option> 
 <option value="23">Ceará</option> 
 <option value="53">Distrito Federal</option> 
 <option value="32">Espírito Santo</option> 
 <option value="52">Goiás</option> 
 <option value="21">Maranhão</option> 
 <option value="51">Mato Grosso</option> 
 <option value="50">Mato Grosso do Sul</option> 
 <option value="31">Minas Gerais</option> 
 <option value="15">Pará</option> 
 <option value="25">Paraíba</option> 
 <option value="41">Paraná</option> 
 <option value="26">Pernambuco</option> 
 <option value="22">Piauí</option> 
 <option value="33">Rio de Janeiro</option> 
 <option value="24">Rio Grande do Norte</option> 
 <option value="43">Rio Grande do Sul</option> 
 <option value="11">Rondônia</option> 
 <option value="14">Roraima</option> 
 <option value="42">Santa Catarina</option> 
 <option value="35">São Paulo</option> 
 <option value="28">Sergipe</option> 
 <option value="17">Tocantins</option> 
</select>
<br>
<select name="cidades">
<option value="">Selecione</option>


<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>
  
    <option class="df 53 form-control" value="Taguatinga">Taguatinga</option> 
  <option class="53 df" value="Samambaia">Samambaia</option> 
  <option class="df" value="Guara">Guara</option> 
</select>

<select name="rua">
<option class="ma"...

JavaScript

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

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

$('[name="rua"] .' + $(this).val()).css('display', '');
});