Select dependientes 2 niveles php mysql

Los elementos selects dependientes dinámicos se suelen utilizar para los desplegables de país y estado. En este tutorial, vamos a implementar un select para seleccionar un país, relacionado con otro desplegable para seleccionar un estado. Es decir, cuando se seleccione un país en el desplegable, se cargarán las coincidencias de estados de dicho país en el desplegable de estados. Todos los datos los extraeremos mediante Ajax a través de un fichero PHP que consulta a nuestra base de datos MySQL.

Antes que nada, el desplegable para la selección de país debe contener todos los países, en este caso como ejemplo solamente tendremos México y Estados Unidos. Cuando un país sea seleccionado, se extraerán sus respectivos estados de la base de datos y aparecerán en el desplegable de estados.

Base de datos y tablas

Crea una base de datos que contenga dos tablas: países, estados. La tabla estados estará relacionada con la tabla países.

CREATE TABLE `estados` (
  `estado_id` int(11) NOT NULL,
  `estado_name` varchar(30) COLLATE utf8_spanish_ci NOT NULL,
  `pais_id` int(11) NOT NULL,
  `status` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;

Ahora insertamos unos estados de ejemplo

INSERT INTO `estados` (`estado_id`, `estado_name`, `pais_id`, `status`) VALUES
(1, 'Guanajuato', 1, 1),
(2, 'Queretaro', 1, 1),
(3, 'Puebla', 1, 1),
(4, 'Guadalajara', 1, 1),
(5, 'Monterrey', 1, 1),
(6, 'Queretaro', 1, 1),
(7, 'Chicago', 2, 1),
(8, 'New York', 2, 1),
(9, 'Florida', 2, 1),
(10, 'California', 2, 1),
(11, 'Texas', 2, 1);

Creamos la tabla de paises

--
-- Estructura de tabla para la tabla `paises`
--

CREATE TABLE `paises` (
  `pais_id` int(11) NOT NULL,
  `pais_name` varchar(30) COLLATE utf8_spanish_ci NOT NULL,
  `status` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;

--
-- Volcado de datos para la tabla `paises`
--

INSERT INTO `paises` (`pais_id`, `pais_name`, `status`) VALUES
(1, 'México', 1),
(2, 'Estados Unidos', 1);

Archivo db.php

<?php

class Conexion{
	static public function conectar()
	{
		$link = new PDO("mysql:host=localhost;dbname=select",
						"root",
						"");
		$link->exec("set names utf8");

		return $link;
	}
}

/**
 * 

 */
class ModeloPaises
{
	
	static public function mdlShowPaises(){

		$stmt = Conexion::conectar()->prepare("SELECT * FROM paises");

		$stmt->execute();

		return $stmt->fetchAll();

		$stmt->close();

		$stmt = null;
	}

	static public function mdlTraerDependencias($id_pais){

		$stmt = Conexion::conectar()->prepare("SELECT * FROM estados WHERE pais_id = $id_pais");

		$stmt->execute();

		return $stmt->fetchAll();

		$stmt->close();

		$stmt = null;
	}
}

Fichero index.php

Este fichero contiene la librería jQuery, Javascript, HTML y el código PHP.

<?php include 'db.php'; ?>
<!DOCTYPE html>
<html>
<head>
	<title>Select dependientes</title>
	 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	  <!-- Bootstrap 3.3.7 -->
  	<link rel="stylesheet" href="files/bower_components/bootstrap/dist/css/bootstrap.min.css">
	  <!--=====================================
	  PLUGINS DE JAVASCRIPT
	  ======================================-->
	  <!-- jQuery 3 -->
	  <script src="files/bower_components/jquery/dist/jquery.min.js"></script>
	  <!-- Bootstrap 3.3.7 -->
	  <script src="files/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>


	<div class="container">
         <center>
	        <button class="btn btn-primary" data-toggle="modal" data-target="#modalverpaises">
	          
	          Ver paises

	        </button>
		</center>
      </div>

<!--=====================================
MODAL ver paises
======================================-->

<div id="modalverpaises" class="modal fade" role="dialog">
  
   <div class="modal-dialog">
     
     <div class="modal-content">
       
        <div class="modal-header" style="background:#3c8dbc; color:white">

          <button type="button" class="close" data-dismiss="modal">×</button>

          <h4 class="modal-title">Paises</h4>

        </div>

        <div class="modal-body">

          <div class="box-body">

            <div class="form-group">
          		<select class="form-control input-lg" id="selectpaisesid" onchange="selectpaises()">
          			<option value="">Seleccione un pais</option>
                <?php
                    $paisesdb = ModeloPaises::mdlShowPaises();
                    foreach ($paisesdb as $key => $value) {
                      echo '<option value="'. $value["pais_id"] .'"> '. $value["pais_name"] .'</option>';
                    }
                ?>
          			
          		</select>
            </div>
            <hr>

            <div class="form-group">
          		<select class="form-control input-lg" id="selectestado" disabled>
          			<option value="">Seleccione un estado</option>
          		</select>
            </div>
            		
          
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Salir</button>
        </div>
     </div>
   </div>
</div>
</body>
<script src="js.js"></script>
</html>

El siguiente código Javascript se utiliza para obtener el estado del fichero select.ajax.php utilizando ajax. También muestra el HTML devuelto del fichero select.ajax.php al respectivo select.

function selectpaises() {
	var id_pais = $("#selectpaisesid").val();
	$.ajax({
		url: "select.ajax.php",
		method: "POST",
		data: {
			"id":id_pais
		},
		success: function(respuesta){
			$("#selectestado").attr("disabled", false);
			$("#selectestado").html(respuesta);
		}
	})
}

Fichero select.ajax.php

Este fichero es llamado por Ajax y sirve para obtener los datos de los países de la base de datos.

<?php
include 'db.php';
$id = $_POST["id"];

$estadosdb = ModeloPaises::mdlTraerDependencias($id);

foreach ($estadosdb as $key => $value) {
	echo '<option value="'.$value["estado_id"].'">'.$value["estado_name"].'</option>';
}

Fuente:tecsolt.com

LINK PROYECTO: AQUI

Deja un comentario