llenar select con respuesta de json

totti026 · #1 (**permalink**) 18/11/2014, 17:56

Hola que tal,

Estoy haciendo un carga automatica de codigos postales..
poniendo el codigo postal se llenan en automatico los demas campos (colonia, municipio y estado)...

Pero el campo colonia me gustaria cambiarlo por un select
ya que como campo (text) tiene todas las colonias separadas por un ";"
pero quisiera que cada colonia se convirtiera en un option dentro de un select.

este es mi script y formulario:

Código HTML:

Ver original.
.
.
<script>
            $(document).ready(function(){   
                
                
                $("#cp").focusout(function(){
                    $.ajax({
                        url:'alumno.php',
                        type:'POST',
                        dataType:'json',
                        data:{ cp: $('#cp').val() }
                    }).done(function(respuesta){
                        $("#colonia").val(respuesta.colonia);
                        $("#municipio").val(respuesta.municipio);
                        $("#estado").val(respuesta.estado);
                    });
                });                             
            });
        </script>
                    
    </head>
    <body>
        
        <form>
            <label for="cp">cp:</label>
            <input type="text" id="cp" name="cp" value=""/>
            <label for="colonia">Colonia:</label>
            <input type="text" id="colonia" name="colonia" value=""/>            
            <label for="municipio">Delegacion/Municipio:</label>
            <input type="text" id="municipio" name="municipio" value=""/>
            <label for="estado">Ciudad/Estado:</label>
            <input type="text" id="estado" name="estado" value=""/>
        </form>
    </body>
.
.
.

y este mi PHP

Código PHP:

Ver original<?php    
    $conexion = new mysqli('localhost','root','','cp',3306);
    mysqli_set_charset($conexion, "utf8");
    $cp = $_POST['cp'];
    $consulta = "SELECT colonia, municipio, estado FROM codigospostales WHERE CodigoPostal = '$cp'";
    
    $result = $conexion->query($consulta);
    
    $respuesta = new stdClass();
    if($result->num_rows > 0){
        $fila = $result->fetch_array();
        $respuesta->colonia = $fila['colonia'];
        $respuesta->municipio = $fila['municipio'];
        $respuesta->estado = $fila['estado'];       
    }
    echo json_encode($respuesta);
 
?>

rjulio21 · #2 (**permalink**) 18/11/2014, 19:59

Ese query que realizas está bien? Tienes toda esa data en la misma tabla?
Creo que deberias tener las colonias en una y municipios y estados en otras dos no?
Bueno, suponiendo que tienes todo eso bien...

Creo que puedes hacer dos cosas.
1. En vez de enviar un json Crear los options desde el código en PHP y devolver HTML
Seria algo así : (Teniendo en cuenta q la parte de la consulta y eso resulte, que no estoy seguro de q estes guardando todos los registros que te traiga la bd.

Código PHP:

Ver original$options = "";
while($data = mysqli_fetch_assoc($result)){
        $options.="<option value=\"$result[id_colonia]\">$result[colonia]</option>";
}
// Luego retornas el option
 
print($options)

Con js en la parte que capturas la respueta: (obviando lo que ya tienes hecho)

Código Javascript:

Ver original....
.done(function(respuesta){
                        $("#colonia").html(respuesta);
                    });

2. Devuelves el query completo de las colonias en un json (para cual debes recorrer el result de la bd con un while y guardarlo en un array, luego devolverlo como ya haces por json_encode). Lo capturas con jQuery y lo recorres con la funcion each, armando las options en js

Código Javascript:

Ver original.done(function(respuesta){
                        var options = "";
                        $.each(respuesta.colonias,function(key,value){
                                  options+='<option value="key">value</option>';
                         })
 
                         $("#colonias").html(options)
                    });

NOTA: uso la función .html de jquery y no "val" pues si es un selector "<select>" el contiene html "<option>" y la función .val() no le aplica.

Espero te sirva. saludos

totti026 · #3 (**permalink**) 19/11/2014, 17:18

Gracias rjulio21,

el campo colonia en la bd viene asi por ejemplo:

Código txt:

Ver originalAmpliación El Capulin;El Capulín;Liberales de 1857;Belém de las Flores

tengo separadas las colonias porun punto y coma.

en mi php hice esto:

Código PHP:

Ver original<?php
    
    //$mysqli->set_charset("utf8");
    $conexion = new mysqli('localhost','root','','cp',3306);
    mysqli_set_charset($conexion, "utf8");
    $cp = $_POST['cp'];
    $consulta = "SELECT colonia, municipio, estado FROM codigospostales WHERE CodigoPostal = '$cp'";
    
    $result = $conexion->query($consulta);
    
    $respuesta = new stdClass();
    if($result->num_rows > 0){
 
        while($fila = $result->fetch_array())
        {           
            $respuesta->colonia = $fila['colonia'];
            $respuesta->municipio = $fila['municipio'];
            $respuesta->estado = $fila['estado'];
        }       
        
    }
    echo json_encode($respuesta);
 
?>

y en el script lo que sugeriste:

Código Javascript:

Ver original$("#cp").focusout(function(){
                    $.ajax({
                        url:'alumno.php',
                        type:'POST',
                        dataType:'json',
                        data:{ cp: $('#cp').val() }
                    }).done(function(respuesta){                        
 
                        $("#colonia").val(respuesta.colonia);
                        $("#municipio").val(respuesta.municipio);
                        $("#estado").val(respuesta.estado);
                        
                        var options = "";
                        $.each(respuesta.colonia,function(key,value){
                                  options+='<option value="key">value</option>';
                         })
 
                         $("#colonias").html(options);
                    });
                });

Solo que me arroja este error...

Código error:

Ver originalUncaught TypeError: Cannot use 'in' operator to search for '69' in Ampliación El Capulin;El Capulín;Liberales de 1857;Belém de las Flores

Muchas gracias por tu tiempo

rjulio21 · #4 (**permalink**) 19/11/2014, 18:14

Tengo dos preguntas.

1. Aqui :

Código PHP:

Ver original$respuesta = new stdClass();
    if($result->num_rows > 0){
 
        while($fila = $result->fetch_array())
        {          
            $respuesta->colonia = $fila['colonia'];
            $respuesta->municipio = $fila['municipio'];
            $respuesta->estado = $fila['estado'];
        }      
       
    }
    echo json_encode($respuesta);

No sobreescribes los valores? Porque simplemente no creas un arreglo para que como tal llegue como json alla?

2. lo has impreso en PHP para ver que se este armando correctamente la estructura? Supongo que el error te da en js... ¿No? Es probable que el JSON no se haya armado correctamente.