Como Retornar o valor de uma Como Retornar o valor de uma tabela em um Select Option

[josenilson 4]

Olá pessoal estou usando uma função Ajax com uma lista de arquivos para manipular em um <select option> os ESTADOS E CIDADES no meu formulário.

A função e esta.

<script type="text/javascript"> 


$(document).ready(function () {


$.getJSON('estados_cidades.json', function (data) {


var items = [];
var options = '<option value="">escolha um estado</option>'; 


$.each(data, function (key, val) {
options += '<option value="' + val.nome + '">' + val.nome + '</option>';
}); 
$("#estados").html(options); 


$("#estados").change(function () { 


var options_cidades = '';
var str = ""; 


$("#estados option:selected").each(function () {
str += $(this).text();
});


$.each(data, function (key, val) {
if(val.nome == str) { 
$.each(val.cidades, function (key_city, val_city) {
options_cidades += '<option value="' + val_city + '">' + val_city + '</option>';
}); 
}
});


$("#cidades").html(options_cidades);


}).change(); 


});


});


</script>

e o meu HTML no caso o select option é este código abaixo.

<!--inicio do seletor-ESTADO--> 
<select id="estados" style="width:170px;font-size: 13px" name="uf" required class="form-control">
<option value=""></option>
</select>
<!--fim do seletor-ESTADO--> 


<!--inicio do seletor-CIDADE--> 
<select id="cidades" style="width:220px;font-size: 13px" name="cidade" value="<?php echo $cliente['Cidade']; ?>"required class="form-control" >
 <option value=""></option>
</select>
<!--fim do seletor-CIDADE-->

Esta funcionando tudo bem, eu consigo salvar o que seleciono no option normalmente, porem a minha dificuldade e na hora de editar esse bendito select option, como eu retorno os valores em um select option ? quero dizer na hora de editar os inputs eu consigo trazer o que já esta cadastrado, só que o select option vem vazio, não estou conseguindo retornar os valores no select de ESTADOS e Cidades.

como faço isso ?

Deixo aqui meu agradecimento e um pequeno pedido, se for possível posta a resolução como chego nesse resultado, pois estou iniciando na programação.

[kelvim 11]

Quando ao clicar você já traz do banco o estado e compara se o estado que você está trazendo é igual ao do banco

$.each(data, function (key, val) {
  options += '<option value="' + val.nome + '" val.nome == "<php? $estadoSalvo ?>"? "selected" : ""' + val.nome + '</option>';
}); 

O mesmo para Cidade, com a diferença que você já deve ter trago a lista de cidades especificas para esse estado.

espero ter ajudado.

[josenilson 4]

Boa mano blz ?

Obrigado por tentar me ajudar, mas tem como esplicar melhor essa solução, sou iniciante em programação, não entendi bem como fazer.

eu tenho que adicionar esse código que você posto no meu script json ? e chamar o option quando editar o form ?

[kelvim 11]

esse trecho que eu postei, foi uma pequena alteração no que você mesmo postou de JS lá em cima.

$.each(data, function (key, val) {
options += '<option value="' + val.nome + '">' + val.nome + '</option>';
});
$("#estados").html(options);

e do jeito que eu sugeri:

$.each(data, function (key, val) {
options += '<option value="' + val.nome + '" val.nome == "<php? $estadoSalvo ?>"? "selected" : ""' + val.nome + '</option>';
});

[josenilson 4]

Eu só não sei como esse option vai buscar no banco e comparar, como você ta fazendo isso ?

essa variável $estadoSalvo chama alguma coisa ?

options += '<option value="' + val.nome + '" val.nome == "<php? $estadoSalvo ?>"? "selected" : ""' + val.nome +

[kelvim 11]

essa variável $estadoSalvo chama alguma coisa ?

Essa variável é estado salvo no banco. que você quer que apareça como selecionado.

[ckcesar 7]

Segue o código de exemplo:

<!-- Aqui vou verificar se tem id, se tiver não roda o $(document).ready(function () { -->
<?php if(isset($_GET['idCliente'])){

        $idlogin = filter_var($_GET["idCliente"], FILTER_SANITIZE_NUMBER_INT);
        $dadosuser = pegarid('Cliente', 'idCliente', $idCliente);
        if ($dadosuser):
            $cliente = $dadosuser;
        else:
            echo "não encontrado";
        endif;
    ?>

    <script type="text/javascript">
        $(document).ready(function () {
             chamar_funcao_editar('<?= $cliente["uf"]; ?>','<?= $cliente["Cidade"]; ?>');
        });
        function chamar_funcao_editar(estado,cidade){
            $.getJSON('estados_cidades.json', function (data) {
                var options = '<option value="'+estado+'">'+estado+'</option>';
                $.each(data, function (key, val) {
                    options += '<option value="' + val.nome + '">' + val.nome + '</option>';
                });
                $("#estados").html(options);
            });
            $('#cidades').html('<option value="'+cidade+'">'+cidade+'</option>');
        }
        function chamar_funcao_cidade(){
            $.getJSON('estados_cidades.json', function (data) {
                var options_cidades = '';
                var str = $('#estados').val();
                $.each(data, function (key, val) {
                    if(val.nome == str) {
                        $.each(val.cidades, function (key_city, val_city) {
                            options_cidades += '<option value="' + val_city + '">' + val_city + '</option>';
                        });
                    }
                });
                $("#cidades").html(options_cidades);
            });
        }
    </script>

<?php }else{?>
<!--FUNÇÃO APLICADA NO SELECT OPTION ESTADOS E CIDADES NO FORMULARIO--->
<script type="text/javascript">
		$(document).ready(function () {
		
			$.getJSON('estados_cidades.json', function (data) {
			
				var items = [];
				var options = '<option value="">escolha um estado</option>';	
			
				$.each(data, function (key, val) {
					
					options += '<option value="' + val.nome + '">' + val.nome + '</option>';
					
				});	
				
				$.each(data, function (key, val) {
  				options += '<option value="' + val.nome + '" val.nome == "<php? $uf ?>"? "selected" : ""' + val.nome + '</option>';
				}); 
								
				$("#estados").html(options);				
				
				$("#estados").change(function () {				
				
					var options_cidades = '';
					var str = "";					
					
					$("#estados option:selected").each(function () {
						str += $(this).text();
					});
					
					$.each(data, function (key, val) {
						if(val.nome == str) {							
							$.each(val.cidades, function (key_city, val_city) {
								options_cidades += '<option value="' + val_city + '">' + val_city + '</option>';
							});							
						}
					});

					$("#cidades").html(options_cidades);
					
				}).change();		
			
			});
		
		});

</script>	
<?php } ?>