Campos de selección dependientes utilizando jQuery, Ajax y PHP

Introducción

Los campos de selección dependiente se utilizan para rellenar automaticamente información en una lista desplegable. Basándose en la selección desplegable, los datos dependientes se recuperan de la base de datos y se muestran en el siguiente cuadro de selección. Es frecuente que estos campos dependientes se usan para desplegar información de los estados o provincias de cada país

Veamos los archivos necesarios comenzando por la conexión a la base de datos dbConfig.php

              <?php
              //Database credentials
              $dbHost     = 'localhost';
              $dbUsername = 'dbUser';
              $dbPassword = 'dbPassword';
              $dbName     = 'dbName';

              //Connect and select the database
              $db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
              mysqli_set_charset($db, 'utf-8');


              if ($db->connect_error) {
                  die("Error de Conexion: " . $db->connect_error);
              }
      

El archivo de inicio index.php y el script js que se ingresa dentro de la etiqueta <head>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
          <script type="text/javascript">
          $(document).ready(function(){
              $('#region').on('change',function(){
                  var regionID = $(this).val();
                  if(regionID){
                      $.ajax({
                          type:'POST',
                          url:'ajaxData.php',
                          data:'region_id='+regionID,
                          success:function(html){
                              $('#provincia').html(html);
                              $('#comuna').html('<option value="">Select comuna</option>'); 
                          }
                      }); 
                  }else{
                      $('#provincia').html('<option value="">Select region</option>');
                      $('#comuna').html('<option value="">Select comuna</option>'); 
                  }
              });
              
              $('#provincia').on('change',function(){
                  var provinciaID = $(this).val();
                  if(provinciaID){
                      $.ajax({
                          type:'POST',
                          url:'ajaxData.php',
                          data:'provincia_id='+provinciaID,
                          success:function(html){
                              $('#comuna').html(html);
                          }
                      }); 
                  }else{
                      $('#comuna').html('<option value="">Select comuna</option>'); 
                  }
              });
          });
        </script>
      

Bien esto lo he dejado como muestra de como se inicia la configuración del sitio web para obtener un select desplegable con Ajax PHP y MySQL, en los siguientes link dejo la demostración funcionando. Además la posibilidad de descargar el código incluyendo la base de datos con un pequeño aporte a través de PayPal

Demostración y el acceso para la descarga



Anuncios / Ads
Anuncios / Ads

Sobre programación web

• Validación de formularios usando características de HTML5
• Método para insertar registros en MySQL usando PHP
• Obtener datos desde MySQL y mostrar el resultado en una tabla
• Los colores y sus códigos RGB
• Cómo evitar los comentarios spam
• Creando un login simple con jquery, php y mysql
• Conversor de Medidas Online
• Visualizar datos en una tabla parte II: Aplicando estilo css
• Un ejemplo de ABM usando Ajax - PHP - MySQL
• Usando jquery para modificar elementos del HTML
• Usar PDO para conectarse a MYSQL
• Cómo detectar el navegador usando JavaScript
• Cómo desarmar un notebook HP Compaq Presario C700

Fotografía

• Michelles Jaque
• Beatriz Cabrera Zapata

Poesías

• Mini Poesías - Constanza Gonzales
• Sobre las decisiones - Constanza Gonzales

Últimas Publicaciones

• Enviar correos usando un formulario desde sitio web o localhost con PHPMailer
• Cómo crear un cuadro de búsqueda al estilo Google
• Sistema de LogIn con verificación de email y recuperación de contraseña usando PHP
• Proyecto Intranet: Ordenes de servicio y ventas
• Demostración Jquery UI Selectable usando php y bases de datos mysql
• Subir, insertar, actualizar, borrar imágenes con PHP y MySQL
• Calculadora IMC usando JavaScript
• Select Dependientes con Ajax MySQL PHP

Anuncios / Ads

Newsletter



Gracias. Te mantendremos informado

Website Template por IdeasChile © 2009 - 2019 Optimizado para Chrome - Firefox - Opera