1

Estoy haciendo un select dependiente de país/provincia. Necesito que al seleccionar el país muestre en el segundo select las distintas provincias de ese país que existen en la tabla usuarios. La tabla en base de datos es algo así:

usuario | pais | provincia

Este es el código que tengo, no tengo mucha idea de Javascript ni de Ajax, lo he hecho viendo un vídeo, pero no funciona. A ver si me podéis ayudar.

<!DOCTYPE html>
<html>
<head>
<title>Combo 3 Niveles</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>

<body>

<form method="post" action="buscar.php">
    
    <select name="paises" id="paises" >
      <option value="">País</option>
      <option value="España">España</option>
      <option value="Argentina">Argentina</option>
    </select>

    <select name="provincias" id="provincias">
   </select>
   
   <input type="submit" value="BUSCAR">

</form>

<script>
    $(document).ready(function(e){
        $("#paises").change(function(){
        var parametros= "pais="+$("#paises").val();
        $.ajax({
            data: parametros,
            url: 'ajax_provincias.php',
            type: 'post',
            beforeSend: function () {
                alert("Enviando")   
            },
            succes: function(response) {
                $("provincias").html(response);
            },
            error: function(){
                alert("error")
            }
        });
    
    })      
    })

</script>

</body>
</html>

ajax_provincias.php

<?php
include 'includes/dbopen.php';

if(isset($POST['pais'])):
$u=$db->query("SELECT distinct provincia FROM usuarios WHERE pais='$POST['pais']' ORDER BY provincia ASC");
$html="";

foreach ($u as $value)
    $html.="<option value='".$value['provincia']."'>".$value['provincia']."</option>";
    echo $html;
    echo "No hay post";
endif;?>

3 respuestas 3

0

Si entendí bien, puede que tenga algo similar o bien igual a lo que necesitas. Esto lo incorpore en un sistema antiguo que hice, espero te sirva.

No es calcado de lo que hice, puesto que le he editado sacando algunos elementos que no son necesarios para el ejemplo (etiquetas html/consultas sql). Pero debiese esta bastante cercano al resultado.

Archivo_1.php

Esta se encarga que, mediante la selección de un valor del select-box, se le transmite al Archivo_2.php.

La sección JavaScript, esta dividida en 2 partes para facilitar mi entendimiento, la primera parte se encarga de reenviar el valor actual que se haya seleccionado en el select (lista_1), esto quiere decir que cada vez que selecciones un nuevo elemento, este se reenviará al otro archivo para que entregue el valor que corresponde.

La segunda parte corresponde al Ajax, este envía el valor actualizado por la primera función al otro archivo. Si el envío se logró de forma exitosa, este devolverá un resultado.

Empresa: 
<select id="lista1" name="lista1" class="form-control input_user">
  <option value="1">Empresa 1</option>
  <option value="2">Empresa 2</option>
  <option value="3">Empresa 3</option>
</select>

<!--1era Parte -->
<script type="text/javascript">
  $(document).ready(function(){
    $('#lista1').val(1);
    recargarLista();

    $('#lista1').change(function(){
      recargarLista();
    });
  })
</script>
<!--2da Parte  -->
<script type="text/javascript">
  function recargarLista(){
    $.ajax({
      type:"POST",
      url:"archivo_2.php",
      data:"nombre_empresa=" + $('#lista1').val(),
      success:function(r){
        $('#select2lista').html(r);
      }
    });
  }
</script>
<tr id="select2lista"></tr> <!--<- Aquí devuelve lo que se entregue el archivo_2.php  -->

Respecto al resultado, que podrían ser varias cosas según se necesite. En este caso, lo que retorne el Archivo_2.php, será lo que mostrará el Ajax.

El resultado, se transmite a una id de una etiqueta html que ira cambiando cada vez que selecciones un nuevo valor del primer select (lista_1).

Archivo_2.php

Este archivo, se encarga de generar un resultado en base a lo que le entregue el Archivo_1.php. El resultado en este caso que se quiere entregar, seria el segundo select. Para ello como puedes ver, se utiliza una consulta sql a la cual se le entrega el valor y dependiendo lo que devuelva, se mostrara uno u otro elemento en el nuevo select.

       $nombre_empresa=$_POST['nombre_empresa'];

       $cadena="<table><tr><th>Local:</th><td>";
       $cadena=$cadena."<select id='lista2' name='lista2' class='form-control input_user'>
       //Consulta para saber los nombres de todos los locales asociados a la empresa.
       $locales = "SELECT local_des FROM empresa as emp, locales as loc, LOCALESXEMPRESALEVEL1 as LE 
            WHERE emp.EmpCod = '".$nombre_empresa."' AND le.EmpCod = emp.EmpCod and loc.local_cod = LE.local_cod";
       $resultado_locales = sqlsrv_query( $link, $locales );
       while( $locales_row = sqlsrv_fetch_array( $resultado_locales, SQLSRV_FETCH_NUMERIC) ){
             $cadena=$cadena. "<option value=' $locales_row[0] '>".$locales_row[0]."</option>";
       }
       echo  $cadena."</select></td></tr></table>";
1
0

Lo he adaptado a mis necesidades pero no consigo que funcione. He editado la pregunta para que se entienda mejor y simplificar el problema a un select dependiente. Este es el código adaptado, pero no funciona:

FORMULARIO

<!DOCTYPE html>
<html>
<head>
<title>Select dependiente</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>

<body>

<select id="lista1" name="lista1" class="form-control input_user">
  <option value="España">España</option>
  <option value="Argentina">Argentina</option>
  <option value="Colombia">Colombia</option>
</select>

<!--1era Parte -->
<script type="text/javascript">
  $(document).ready(function(){
    $('#lista1').val(1);
    recargarLista();

    $('#lista1').change(function(){
      recargarLista();
    });
  })
</script>
<!--2da Parte  -->
<script type="text/javascript">
  function recargarLista(){
    $.ajax({
      type:"POST",
      url:"archivo_2.php",
      data:"pais=" + $('#lista1').val(),
      success:function(r){
        $('#select2lista').html(r);
      }
    });
  }
</script>

<div id="select2lista" name="select2lista"></div><!--<- Aquí devuelve lo que se entregue el archivo_2.php  -->

</body>
</html>

Archivo_2.php

$pais=$_POST['pais'];

$cadena="<select class='form-control input_user'>";

$provincias=mysqli_query($db,"SELECT distinct provincia FROM usuarios WHERE pais='$pais' ORDER BY provincia ASC");

while($rowprovincias=mysqli_fetch_array($provincias)){
$provincia=$rowprovincias["provincia"];

$cadena=$cadena. "<option value='$provincia'>".$provincia."</option>";
       
}

 echo $cadena. "</select>";
1
  • Esta no es una respuesta, si quieres agregar detalles adicionales hazlo sobre la pregunta generada editando las veces que sean necesarias. el 30 sep. 2022 a las 17:14
0

Lo que deseas son select anidados, esto lo podemos hacer sin necesidad de un formulario, solo escuchamos el evento change del select pais y ejecutamos una función al detectar el evento, con Ajax hacemos la petición sin necesidad de recargar la pagina, seria algo como esto:

//DETECTAMOS QUE EL DOM SE CARGUE COMPLETAMENTE
$(document).ready(function() {
  //ESCUCHAMOS EL EVENTO DE CAMBIO EN EL PRIMER SELECT
  $("#lista1").on('change', function() {

    //CON ESTO RESETEAMOS EL SELECT DE PROVICNCIAS AL CAMBIAR LA SELECCION DE PAIS(PRIMER SELECT)
    $('#lista2').find('option').remove().end().append('<option value="whatever">Provincia...</option>').val('whatever');

    //OBTENEMOS LA OPCION SELECCIONADA DEL PRIMER SELECT
    $("#lista1 option:selected").each(function() {
      //ALAMACENAMOS EN UNA VARIABLE EL VALUE DE DICHA SELECCION
      var pais = $(this).val();
      //HACEMOS LA PETICION ENVIANDO DICHO VALUE
      $.ajax({
        data: {
          pais: pais
        },
        url: 'ajax_provincias.php',
        type: 'post',
        beforeSend: function() {
          alert("Enviando")
        },
        //PINTAMOS LA DATA DEVUELTA POR PHP EN LISTA2
        succes: function(response) {
          $("#lista2").html(response);
        },
        error: function() {
          alert("error")
        }
      });
    });
  })
});
<!DOCTYPE html>
<html>

<head>
  <title>Select dependiente</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script type="text/javascript" src="js/jquery.min.js"></script>
</head>

<body>

  <select id="lista1" name="lista1" class="form-control input_user w-25">
    <option value="">PAIS...</option>
    <option value="España">España</option>
    <option value="Argentina">Argentina</option>
    <option value="Colombia">Colombia</option>
  </select>

  <select id="lista2" name="lista2" class="form-control input_user w-25">
    <option value="">PROVINCIA...</option>
  </select>


</body>

</html>

PHP

<?php
include 'includes/dbopen.php';

//COMPROBAMOS QUE LLEGUE EL DATO DEL SELECT
if(isset($POST['pais'])){

    //GUARDAMOS EL DATO RECIBIDO EN UNA VARIABLE
    $pais = $_POST['pais'];
    //CONDICIONAMOS LA CONSULTA CON LA VARIABLE RECIBIDA $PAIS
    $result = $db->query("SELECT distinct provincia FROM usuarios WHERE pais = '$pais' ORDER BY provincia ASC");

    //DECLARAMOS UN ARREGLO PARA ALMACENAR LA DATA DE LA CONSULTA EN EL
    $data = array();
    //RECORREMOS LAS FILAS  E INSERTAMOS EN EL ARRAY
    while($row = $result->fetch_object()){
        $data[] = $row;
    }
    //VERIFICAMOS QUE EL ARRAY NO ESTE VACIO
    if(count($data)>0){
        echo "<option value=''>PROVINCIA...</option>";
        foreach ($data as $d) {
            echo '<option value="$d -> provincia">'.$d-> provincia.'</option>';  
        }
    //SI ESTA VACIO IMPRIME EL MENSAJE
    }else{
            echo '<option value="">No se encontro ninguna provincia</option>';
    }
//SI NO LLEGA NINGUN DATO
}else{
    echo "No llego ningun dato";
}
?>

El código lo comente para que lo entiendas, trate de adaptarlo lo mas posible, no suelo utilizar mucho MySQL, espero te sirva.

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.