Populando select com jquery

Kelvim · 19 de abril de 2016

Boa noite

Eu tenho um código que preenche um select de um formulário conforme a pessoa escolhe o estado.

porém eu não sei mexer muito com JQUERY, gostaria que alguém me ajudasse a alterar os campos para que ele funcionasse.

Eu já criei um banco de dados no servidor WEB PHP com a tabela de Estados e a tabela de Cidades.

Nome do banco de dados: tecno764_cidades

Nome da tabela de estados: estados

Nome da tabela de cidades: cidades

Segue abaixo o código que tenho.

function retornaMunicipios(estado){
        
         $.getJSON("ajax_municipios.php", {           
             estado:estado}, function (resposta) {            
             if (resposta === null) {
                 var options = '<option value="" selected="selected" data-skip="1">Selecione a cidade</option>';
                 $("#Cidade").html(options);
             } else {
                 
                 var options = '<option value="" selected="selected" data-skip="1">Selecione a cidade</option>';
                 $.each(resposta, function (key, val) {
                     options += '<option value="' + key + '">' + val + '</option>';
                 });
                 
                 $("#Cidade").html(options);
                                         
                
                
             }
            });
         
    
}

Abaixo o HTML do formulario.

<li class="li-estado">
                            <label>Estado:</label>
                             <select class="estado" id="Estado" name="Estado" required="required" title="Estado" onChange="retornaMunicipios(this.value);">
                             <option value="">UF</option>
                            
                                <option value="12">AC</option>
                           
                                <option value="27">AL</option>
                           
                                <option value="16">AP</option>
                           
                                <option value="13">AM</option>
                           
                                <option value="29">BA</option>
                           
                                <option value="23">CE</option>
                           
                                <option value="53">DF</option>
                           
                                <option value="32">ES</option>
                           
                                <option value="52">GO</option>
                           
                                <option value="21">MA</option>
                           
                                <option value="51">MT</option>
                           
                                <option value="50">MS</option>
                           
                                <option value="31">MG</option>
                           
                                <option value="15">PA</option>
                           
                                <option value="25">PB</option>
                           
                                <option value="41">PR</option>
                           
                                <option value="26">PE</option>
                           
                                <option value="22">PI</option>
                           
                                <option value="33">RJ</option>
                           
                                <option value="24">RN</option>
                           
                                <option value="43">RS</option>
                           
                                <option value="11">RO</option>
                           
                                <option value="14">RR</option>
                           
                                <option value="42">SC</option>
                           
                                <option value="35">SP</option>
                           
                                <option value="28">SE</option>
                           
                                <option value="17">TO</option>
                           
                                
                            </select>
                        </li>
                        
                        <li class="li-cidade">
                            <label class="label-cidade">Cidade:</label>
                            <select class="cidade" id="Cidade" name="Cidade" required="required" title="Cidade">
                                <option>Selecione a cidade</option>
                            </select>
                        </li>

Att

Kelvim Barbosa Gomes

mario cesar berardo · 20 de abril de 2016

Ola amigo,

Pode descrever o que está acontecendo ?

De cara olhando seu código tenho algumas considerações :

1) Até onde eu sei o método .html do JQuery só funciona para leitura.

Para escrite você tem de usar o método .append() do JQuery.

2) O método $.each() do JQuery não funciona bem, salvo tenham melhorado nas versões mais recentes.

Melhor fazer "for-next" mesmo.

Eu não uso JQuery. Tudo que o JQuery faz eu faço em JavaScript mesmo.

Apesar de facilitar a vida, JQuery são funções em JavaScript e tem muitos problemas.

Vale mais a pena aprender JavaScript.

você ganha muito em performance na página, dominio de código e não corre o risco nem perde um tempo louco com bugs inexplicáveis.

Valeu !

Kelvim · 20 de abril de 2016

4 horas atrás, mario cesar berardo disse:

Ola amigo,

Pode descrever o que está acontecendo ?

De cara olhando seu código tenho algumas considerações :

1) Até onde eu sei o método .html do JQuery só funciona para leitura.

Para escrite você tem de usar o método .append() do JQuery.

2) O método $.each() do JQuery não funciona bem, salvo tenham melhorado nas versões mais recentes.

Melhor fazer "for-next" mesmo.

Eu não uso JQuery. Tudo que o JQuery faz eu faço em JavaScript mesmo.

Apesar de facilitar a vida, JQuery são funções em JavaScript e tem muitos problemas.

Vale mais a pena aprender JavaScript.

você ganha muito em performance na página, dominio de código e não corre o risco nem perde um tempo louco com bugs inexplicáveis.

Valeu !

Boa tarde

Eu estou precisando de um método que preencha um formulario, os campos de Estado e depois de acordo com o Estado que seja listado as cidades daquele estado para que a pessoa escolhe.

Poderia me indicar um post para ler a repeito de java script ou até mesmo me enviar um arquivo com o código.

<form onSubmit="return checa_formulario(this)" class="combos validar" action="mail.php" method="post" enctype="multipart/form-data" name="email">

                    <ul class="formulario">
                    
                        <li>
                            <label>Nome:</label>
                            <input name="Nome" id="Nome" required title="Nome" type="text">
                        </li>
                        
                        <li>
                            <label>Email:</label>
                            <input name="email_from" type="email" id="email_from" required title="Email">
                        </li>
                        
                        
                         <li class="li-telefone">
                            <label>Telefone:</label>
                            <input class="telefone mask-Telefone" name="Telefone" id="Telefone" type="text" required title="Telefone">
                        </li>
                        
                         <li class="li-celular">
                            <label class="label-celular">Celular:</label>
                            <input class="celular mask-Telefone" name="Celular" id="Celular" type="text" required title="Celular">
                        </li>
                        
                         <li>
                            <label>Endereço:</label>
                            <input name="Endereco" id="Endereco" type="text" required title="Endereco">
                        </li>
                        
                        <li class="li-complemento">
                            <label>Complemento:</label>
                            <input class="complemento" name="Complemento" type="text" id="Complemento">
                        </li>
                        
                        <li class="li-cep">
                            <label class="label-cep">Cep:</label>
                            <input class="cep mask-CEP" name="Cep" type="text" id="Cep" required title="Cep">
                        </li>
                        
                         <li>
                            <label>Bairro:</label>
                            <input name="Bairro" type="text" id="Bairro" required title="Bairro">
                        </li>
                        
                       <li class="li-estado">
                            <label>Estado:</label>
                             <select class="estado" id="Estado" name="Estado" required="required" title="Estado" onChange="retornaMunicipios(this.value);">
                             <option value="">UF</option>
                            
                                <option value="12">AC</option>
                           
                                <option value="27">AL</option>
                           
                                <option value="16">AP</option>
                           
                                <option value="13">AM</option>
                           
                                <option value="29">BA</option>
                           
                                <option value="23">CE</option>
                           
                                <option value="53">DF</option>
                           
                                <option value="32">ES</option>
                           
                                <option value="52">GO</option>
                           
                                <option value="21">MA</option>
                           
                                <option value="51">MT</option>
                           
                                <option value="50">MS</option>
                           
                                <option value="31">MG</option>
                           
                                <option value="15">PA</option>
                           
                                <option value="25">PB</option>
                           
                                <option value="41">PR</option>
                           
                                <option value="26">PE</option>
                           
                                <option value="22">PI</option>
                           
                                <option value="33">RJ</option>
                           
                                <option value="24">RN</option>
                           
                                <option value="43">RS</option>
                           
                                <option value="11">RO</option>
                           
                                <option value="14">RR</option>
                           
                                <option value="42">SC</option>
                           
                                <option value="35">SP</option>
                           
                                <option value="28">SE</option>
                           
                                <option value="17">TO</option>
                           
                                
                            </select>
                        </li>
                        
                        <li class="li-cidade">
                            <label class="label-cidade">Cidade:</label>
                            <select class="cidade" id="Cidade" name="Cidade" required="required" title="Cidade">
                                <option>Selecione a cidade</option>
                            </select>
                        </li>
                        
                        <li>
                            <label>Função:</label>
                            <input name="Funcao" type="text" id="Funcao" required title="Função">
                        </li>
                        
                        <li>
                            <label>Resumo das Habilidades:</label>
                            <textarea rows="4" id="Habilidades" name="Habilidades" required title="Habilidades"></textarea>
                        </li>
                        
                        <li>
                            <label>Currículo:</label>
                             <div id="div-input-file">
                                        <input name="arquivo" type="file" id="arquivo" onChange="document.getElementById('foto-falso').value = this.value;" tabindex="7" required title="Currículo">
                                        <div id="div-input-falso">
                                          <input name="foto-falso" type="text" id="foto-falso" readonly> 
                                        </div>
                                      </div>
                        </li>
                        
                        <li>
                            <input type="submit" value="ENVIAR">
                        </li>
                    
                    </ul>
                
                </form>