11 agosto, 2024
Menu Desplegable con JS, PHP y MySql
¿Quieres aprender a crear un sistema de selección de menús desplegables dependientes usando JavaScript, PHP y MySQL? ¡Este videotutorial es para ti!
Suscríbete a nuestro canal en Youtube
Suscríbirse- MySQL para la base de datos.
- PHP para el backend.
- JavaScript puro para la manipulación del DOM.
Para crear una selección de dependientes de tres niveles (por ejemplo, Departamento, Provincia, Distrito) utilizando JavaScript puro, PHP y MySQL, puedes seguir estos pasos:
1. Estructura de la Base de Datos
conexion.php
<?php
// dbperu
//php 8.1.*
class CodeaDB{
private $host ="localhost";
private $usuario="root";
private $clave ="";
private $db ="dbperu";
public $conexion;
public function __construct(){
$this->conexion = new mysqli(
$this->host,
$this->usuario,
$this->clave,
$this->db) or die("error");
$this->conexion->set_charset("utf8");
}
public function buscar($tabla, $condicion){
$resultado = $this->conexion->query("SELECT * FROM $tabla WHERE $condicion") or die($this->conexion->error);
if($resultado)
return $resultado->fetch_all(MYSQLI_ASSOC);
return false;
}
}
2. HTML y JavaScript Puro
index.php
<?php
require "conexion.php";
$cnx = new CodeaDB();
$departamentos = $cnx->buscar("departamentos","1");
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SELECT DEPENDIENTES EN JS MYSQL Y PHP</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-10 text-center">
<h1>SELECT DEPENDIENTES DE 3 NIVELES EN JAVASCRIPT + PHP + MYSQL</h1>
</div>
<div class="col-sm-4 my-5">
<select name="departamentos" class="form-control" id="selectDepartamentos">
<?php foreach ($departamentos as $departamento) { ?>
<option value="<?php echo $departamento['id'] ?>"><?php echo $departamento['nombre'] ?></option>
<?php } ?>
</select>
</div>
<div class="col-sm-4 my-5">
<select name="provincias" class="form-control" id="selectProvincias"><option>Elegir</option></select>
</div>
<div class="col-sm-4 my-5">
<select name="distritos" class="form-control" id="selectDistritos"><option>Elegir</option></select>
</div>
<div class="col-sm-7">
<div class="card card-body py-5">
<h1 id="distrito" class="text-center"></h1>
</div>
</div>
</div>
</div>
<script>
// SELECT 2
selectDepartamentos.addEventListener("change",e=>{
selectProvincias.innerHTML = "<option>Elegir</option>"
selectDistritos.innerHTML = "<option>Elegir</option>"
fetch("dataProvincias.php",{
method:'POST',
body:JSON.stringify({ id:e.target.value })
})
.then( response =>{
return response.json()
})
.then( data =>{
if(data.success){
var html =""
for(var i in data.lista){
html += "<option value='"+data.lista[i].id+"'>"+data.lista[i].nombre+"</option>"
}
selectProvincias.innerHTML = html
}else{
alert("error")
}
})
.catch(error=>console.error(error))
})
// SELECT 3
selectProvincias.addEventListener("change",e=>{
//console.log(e.target.value)
fetch("dataDistritos.php",{
method:'POST',
body:JSON.stringify({ id:e.target.value })
})
.then( response =>{
return response.json()
})
.then( data =>{
if(data.success){
var html =""
for(var i in data.lista){
html += "<option value='"+data.lista[i].id+"'>"+data.lista[i].nombre+"</option>"
}
selectDistritos.innerHTML = html
}else{
alert("error")
}
})
.catch(error=>console.error(error))
})
selectDistritos.addEventListener("change",e=>{
const s = e.target;
const selectedText = s.options[s.selectedIndex].text;
distrito.innerHTML = selectedText
})
</script>
</body>
</html>
3. PHP para Obtener los Datos de MySQL
Leido 476 veces
MVC PHP y MySql Página Web
Curso MVC PHP y MySQL aprende a desarrollar una página web con el modelo vista controlador
Descarga del código fuente
USD 10.00
