2

Tenho 02 selects que ao selecionar a cidade do primeiro, automaticamente preenche o estado do outro. Vejam:

<select name='Cidade' id='cidade' class="form-control" required='required'>
     <option>Selecione a cidade</option>
     <option value="RJ">Rio de Janeiro</option>
     <option value="SP">São Paulo</option>
</select>

<script type=\"text/javascript\">
$(function(){
    $('#cidade').change(function(){
        if( $(this).val() ) {
            $('#estado').hide();
            $('.carregando').show();
    $.getJSON('listar-estados.php?search=',{series: $(this).val(), ajax: 'true'}, function(j){
                var options = '';
                for (var i = 0; i < j.length; i++) {
                    options += '<option value=\"' + j[i].id + '\">' + j[i].estado + '</option>';
                }
                $('#estado').html(options).show();
                $('.carregando').hide();
            });
        } else {
            $('#estado').html('<option value="">– Escolha o estado –</option>');
        }
    });
});
</script>

Os estados vem do banco de dados Mysql e é listado em PHP:

<?php
    public function listarEstados($idCidades){

    $sqlEstados = mysqli_query($this->conexao,"SELECT * FROM estados WHERE Cidades = '".$idCidades."';");

       while($peEstados = mysqli_fetch_assoc($sqlEstados)){
              $listarEstados[] = array(
                  'id'  => $peCidades['$idEstados'],
                  'estados' => utf8_encode($peEstados['Estados']),
              );
         }
       return (json_encode($listarEstados));
    }
?>

O HTML:

<div class="form-group">
    <span class="carregando">Aguarde, carregando...</span>
    <label for="estado" class="control-label">Estado: <span style="color: red">*</span></label>
         <select name="Estado" id="estado" class="form-control" >
        <option>Selecione a cidade acima</option>
    </select>
</div>

Funciona perfeitamente, mas como eu poderia pegar o valor selecionado no estado (segundo select) e jogar para o jquery abaixo?

var estadousuario = document.querySelector('#estadousuario');
var paragrafoEstadoUsuario = document.querySelector('#paragrafoestadousuario');
estadousuario.addEventListener('keyup', function () {
paragrafoEstadoUsuario.innerHTML = "<input maxlength='200' type='text' ='' class='form-control' value='" + estadousuario.value + "' disabled />";
2
  • Por que o uso do array values = [];? A intenção é um select de múltipla escolha?
    – Meu ovo
    16/09/2018 às 22:00
  • Olá sam. Ajustei o meu post.
    – user24136
    16/09/2018 às 22:44

2 Respostas 2

3

Tem alguns erros no código:

No for você está pegando j[i].estado ("estado" no singular) do retorno do Ajax, e no PHP está retornando 'estados' => ("estados" no plural). Isso resulta em undefined.

Altere no PHP a linha para:

'estado' => utf8_encode($peEstados['Estados']),

Aqui: document.querySelector('#estadousuario'); você está selecionando um id que não existe. O id do select é #estado, então o correto seria:

var estadousuario = document.querySelector('#estado');

Para pegar o valor do select, não use o evento keyup, e sim change:

estadousuario.addEventListener('change', function () {...

Com essas correções irá funcionar:

var estadousuario = document.querySelector('#estado');
var paragrafoEstadoUsuario = document.querySelector('#paragrafoestadousuario');
estadousuario.addEventListener('change', function () {
   paragrafoEstadoUsuario.innerHTML = "<input maxlength='200' type='text' ='' class='form-control' value='" + estadousuario.value + "' disabled />";
});

$(function(){
   $('#cidade').change(function(){
      if( $(this).val() ) {
         $('#estado').hide();
         $('.carregando').show();
         $.getJSON('listar-estados.php?search=',{series: $(this).val(), ajax: 'true'}, function(j){
            var options = '';
            for (var i = 0; i < j.length; i++) {
               options += '<option value=\"' + j[i].id + '\">' + j[i].estado + '</option>';
            }
            $('#estado').html(options).show();
            $('.carregando').hide();
         });
      } else {
         $('#estado').html('<option value="">– Escolha o estado –</option>');
      }
   });
});

Você pode usar o evento change em jQuery, fica mais simples o código:

Troque:

var estadousuario = document.querySelector('#estado');
var paragrafoEstadoUsuario = document.querySelector('#paragrafoestadousuario');
estadousuario.addEventListener('change', function () {
   paragrafoEstadoUsuario.innerHTML = "<input maxlength='200' type='text' ='' class='form-control' value='" + estadousuario.value + "' disabled />";
});

Por:

$('#estado').on("change", function(){
   $('#paragrafoestadousuario').html("<input maxlength='200' type='text' ='' class='form-control' value='" + this.value + "' disabled />");
});
7
  • Certo. Fiz exatamente como você passou, mas está retornando null.
    – user24136
    16/09/2018 às 23:12
  • Será que por os valores estarem vindos do BD e retornando json_encode(), não estaria conflitando?
    – user24136
    16/09/2018 às 23:13
  • Estão sim... aparece normalmente....
    – user24136
    16/09/2018 às 23:18
  • 1
    Cara, após escolher uma cidade e popular os Estados, vai em "inspecionar elementos" do navegador e inspecione esse select dos Estados. Veja se está retornando os values certinho.
    – Meu ovo
    16/09/2018 às 23:28
  • 1
    Que bom.. rs.. boa sorte!
    – Meu ovo
    16/09/2018 às 23:31
1

Boa noite amigo,

Você pode seguir o mesmo que já foi feito para a cidade, adicionando um evento de change() no selectBox do Estado:

    $('#estado').change(function () {
        var estadoSelecionado = $(this).val();
        
        //Faça o que quiser aqui
    }

2
  • Boa noite Victor. Me perdoe, esqueci de colocar o restante do código. Os estados vem do banco de dados. Alterei o meu post.
    – user24136
    16/09/2018 às 22:19
  • E quando uso o seu código, retorna null.
    – user24136
    16/09/2018 às 22:39

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