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 676 veces | 1 usuarios

Descarga del código fuente Javascript de Menu Desplegable con JS, PHP y MySql

3 descargas

Para descargar el código crea una cuenta

Crear cuenta

Compartir link del tutorial con tus amigos


MVC PHP y MySql Página Web

USD 10.00

Descarga del código fuente

MVC PHP y MySql Página Web

Más tutoriales de Javascript

Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024