4

Tengo dos select, uno cargo los países, en el otro las provincias que "reacciona" de acuerdo al país que se seleccionó primero. Recién consulté cómo traer desde una BD el código de un país y hacer que ese select de países me muestre el país que viene desde la BD, pero tambien tengo una provincia que traigo desde la BD. Ahora bien, aplicando esa carga, "no reacciona" el select de provincias ya que no se carga de acuerdo al select seleccionado mediante el dato de la BD. El select de países se carga con:

<select id="pais" class="ui fluid search dropdown" name="pais">
        <option value="0"></option>
        <?php
            $conexion = new Conexion();
            $stmt = $conexion -> prepare("SELECT paiscod, paisnom FROM paises ORDER BY paisnom");
            $stmt->execute();

            while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
            if ( $row['paiscod'] == $pais ) { ?>
                <option value = "<?php echo $row['paiscod']?>" selected><?php echo ($row['paisnom'])?></option>
            <?php } else { ?>
                <option value = "<?php echo $row['paiscod']?>"><?php echo ($row['paisnom'])?></option>
            <?php }
            } 
        ?>
    </select>


    <select id="provincias" class="ui fluid search dropdown" name="selectProvincias">
        <option value=""></option>
    </select>



    $id_pais = $_POST['id_pais'];

    $conexion = new Conexion();
    $stmt = $conexion -> prepare("SELECT provincod, provinnom FROM provincia WHERE paiscod = :valor");
    $stmt->bindParam(':valor', $id_pais);
    $stmt->execute();

    if ($stmt->rowCount() > 0) {
        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {   
            $html .= '<option value = "'.$row['provincod'].'">'. $row['provinnom'].'</option>';
        }
    }
    echo $html;


    <script language="javascript">
    $(document).ready(function() {
        $("#pais").change(function() {
            $("#pais option:selected").each(function() {
                id_pais = $(this).val();
                $.post("provincias.php", {
                    id_pais: id_pais
                }, function(data) {
                    $("#provincias").html(data);
                });
            });
        })
    });
    </script>

PREGUNTA 1: ¿Por qué el js no reconoce el cambio en el select país cuando toma el valor desde la BD ?

PREGUNTA 2: ¿Cómo le paso el código de la provincia que viene por BD para que me muestre la provincia seleccionada ?

8
  • A ver si entendi, cuando eliges un pais el select no ejecuta el metodo change?
    – Einer
    Commented el 29 jul. 2017 a las 13:53
  • ¿Para qué el each del option:selected si sólo se puede seleccionar una opción? Mejor mete directo id_pais = $("#pais option:selected").val() Y es mejor que tu código de php que consulta la BD por las provincias lo pongas en otra clase, y en $.ajax pones la ruta al archivo.
    – Yikarus
    Commented el 29 jul. 2017 a las 13:53
  • @linux Tambien puede eliminar esta línea $("#pais option:selected").each(function() { que esta demás y ya esta. Commented el 29 jul. 2017 a las 13:56
  • Puede ser un problema en el archivo provincias.php ¿Qué te muestra en la consola si haces console.log(data)? Commented el 29 jul. 2017 a las 13:57
  • 1
    el codigo funciona. Cuando se carga el formulario, se cargan los países... cuando selecciono un país, me flitra las provincias, el problema radica en cuando traigo por base de datos, el código del país, el select de las provincias no se carga para ese país y menos el código de la provincia almacenado en la base de datos...
    – MNibor
    Commented el 29 jul. 2017 a las 14:16

1 respuesta 1

2

Me permitiré comentar algunas cosas sobre tu código, por partes.

Quería decírtelo en comentario, pero el espacio no me daría.

No lo dices en tu pregunta, pero supongo que este código se encuentra en un archivo diferente de provincias.php

Digamos que el archivo se llama paises.php.

Código en paises.php:

1. No preparares algo ya preparado

Las consultas preparadas se usan cuando intervienen datos desde otra parte. No es el caso aquí. La consulta está ya preparada, no hay riesgo de mandarla directamente mediante el método query:

$stmt = $conexion -> prepare("SELECT paiscod, paisnom FROM paises ORDER BY paisnom");
$stmt->execute();

Por lo tanto, esto sería suficiente:

$stmt =$conexion->query("SELECT paiscod, paisnom FROM paises ORDER BY paisnom");

2. Todo el procedimiento del while que tienes, se puede simplificar así:

//Crear un array con los datos
//PDO::FETCH_ASSOC  se usa con fetchAll, no con fetch
$arrDatos = $stmt->fetchAll(PDO::FETCH_ASSOC);

//Verificar si hubo datos. El uso de rowCount para esto es sólo un mito 
//en PDO basta con verificar la respuesta del fetchAll

if ($arrDatos)
{
    //Implementamos una forma más limpia de hacer las cosas
    //Una variable que recoja todo y vaya concatenado

    $strHtml='';
    foreach ($arrDatos as $row)
    {
        if ( $row['paiscod'] == $pais ) 
        { 
            $strHtml.='<option value = "'.$row["paiscod"].' selected>'.$row["paisnom"].'</option>';
        } else {
            $strHtml.='<option value = "'.$row["paiscod"].'>'.$row["paisnom"].'</option>';
        }
     }
     //Fuera del bucle imprimimos la variable concatenada
     echo $strHtml;

 }else{
       echo "No se encontraron países";
 }

3. El script debe estar en paises.php:

Lo puedes mejorar, como se ha dicho en comentarios. Imagino que en el HTML tienes un select cuyo id es provincias.

El script, aunque quizá funcione, está usando código obsoleto: $(document).ready(function() {... es obsoleto a partir de jQuery3. Se recomienda usar $(function() {....

Del mismo modo, las peticiones Ajax se recomienda que tengan al menos la posibilidad de manejar done en caso de éxito, y fail en caso de error (ver aquí).

  <script language="javascript">
    $(function() {
        $("#pais").change(function() {
            $("#pais option:selected").each(function() {
                id_pais = $(this).val();
                $.post("provincias.php", {
                    id_pais: id_pais
                }, function(data) {
                    $("#provincias").html(data);
                });
            });
        })
    });
    </script>

La petición que se hace a través de Ajax/jQuery debe ir dirigida a otro archivo diferente. En este caso es el archivo indicado en la url de la petición provincias.php.

Código en provincias.php:

$id_pais = $_POST['id_pais'];

$conexion = new Conexion();
$stmt = $conexion -> prepare("SELECT provincod, provinnom FROM provincia WHERE paiscod = :valor");
$stmt->bindParam(':valor', $id_pais);
$stmt->execute();

//Es un error común usar fetch combinado con `PDO::FETCH_ASSOC`
//Así no se obtiene nada, debes usar fetchAll
//por eso no obtenías las provincias

//Como en países, almacenamos los datos en un arrego
$arrDatos=$stmt->fetchAll(PDO::FETCH_ASSOC))

//Desechamos el mito del rowCount, verificando los datos directamente
//como hicimos en países

if ($arrDatos)
{
    $strHtml="";
    foreach ($arrDatos as $row)
    {

        $strHtml .= '<option value = "'.$row['provincod'].'">'. $row['provinnom'].'</option>';
    }

    echo $strHtml;

}else{

    echo "No se encontraron provincias";

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.