Trocar Select com jQuery

Trocar Select com jQuery

Neste artigo veja como alterar o valor dos values do segundo select com base no primeiro.

O elemento HTML select representa um controle que apresenta um menu de opções.

As opções dentro do menu são representadas pelo elemento option, que podem ser agrupados por elementos optgroup.

Veja o Exemplo do Select:

<form>

  <select name="pais">
    <option value="Brasil">Brasil</option>
    <option value="Estados Unidos">Estados Unidos</option>
    <option value="Japão">Japão</option>
    <option value="Índia">Índia</option>
    <option value="Angola">Angola</option>
    <option value="Marrocos">Marrocos</option>
    <option value="México">México</option>
  </select>

</form>

Vamos dar início Adicionando o formulário com os Selects:

<form class="formulario">

    <label>
        <span>Pais</span>
        <select name="pais">

            <option value="" class="vazio">Selecione um Páis</option>
            <option value="Brasil">Brasil</option>
            <option value="Eua">Estados Unidos</option>
            <option value="Japão">Japão</option>
       
        </select>
    </label>
   
    <label class="lista-estado">
        <span>Estado</span>
        <select name="Estado">
            
            <option data-pais="Brasil" value="São Paulo">São Paulo</option>
            <option data-pais="Brasil" value="Rio de Janeiro">Rio de Janeiro</option>
            <option data-pais="Brasil" value="Santa Catarina">Santa Catarina</option>
            <option data-pais="Brasil" value="Brásilia">Brásilia</option>
            <option data-pais="Brasil" value="Paraná">Paraná</option>
            <option data-pais="Brasil" value="Bahia">Bahia</option>

            <option data-pais="Eua" value="Califórnia">Califórnia</option>
            <option data-pais="Eua" value="Washington">Washington</option>
            <option data-pais="Eua" value="Flórida">Flórida </option>
            <option data-pais="Eua" value="Virgínia">Virgínia </option>
            <option data-pais="Eua" value="Nova York">Nova York </option>
            <option data-pais="Eua" value="Luisiana">Luisiana </option>

            <option data-pais="Japão" value="Tóquio">Tóquio</option>
            <option data-pais="Japão" value="Kyushu">Kyushu</option>
            <option data-pais="Japão" value="Kanto">Kanto</option>
            <option data-pais="Japão" value="Chugoku">Chugoku</option>

        </select>
    </label>

</form><!--Formulário-->

Vamos Adicinar o script para trocar o (data-pais):

<script src="js/jquery.js"></script>
<script>

    $(function(){

        var estados = $('select[name="Estado"] option');
        $('select[name="pais"]').on('change', function () {
                
            var pais = this.value;
            var novoSelect = estados.filter(function () {
                return $(this).data('pais') == pais;
            });

            $('select[name="Estado"]').html(novoSelect);
            $('.lista-estado') .fadeIn();
            $('.vazio') .hide();

        });

    });
    
</script>

Veja o Resultado !

Baixar Código Veja Funcionando