[APORTE] - Select dependiente (3 niveles)

alexisverano · #1 (**permalink**) 06/02/2014, 10:53

Amigos,
Como ya sabemos el tema es bastante solicitado por todos los integrantes de FDW, aprovecho que tuve que hacer un sistema con tres listas desplegables dependientes y les dejo aqui toda la informacion.

MySQL + AJAX + PHP

3 tablas (provincias - municipios - consejos)

Código MySQL:

Ver originalDROP TABLE IF EXISTS `nm_provincias`;
CREATE TABLE `nm_provincias` (
  `id` int(11) NOT NULL auto_increment,
  `provincia` varchar(50) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 ROW_FORMAT=FIXED;

Código MySQL:

Ver originalDROP TABLE IF EXISTS `nm_municipios`;
CREATE TABLE `nm_municipios` (
  `id` int(10) NOT NULL auto_increment,
  `idprovincia` varchar(5) default NULL,
  `municipio` varchar(50) default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC;

Código MySQL:

Ver originalDROP TABLE IF EXISTS `nm_consejos`;
CREATE TABLE `nm_consejos` (
  `id` int(10) NOT NULL auto_increment,
  `idmunicipio` varchar(5) default NULL,
  `consejos` varchar(70) default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC;

alexisverano · #2 (**permalink**) 06/02/2014, 10:55

conexion.php

Código PHP:

Ver original$db_host = "localhost"; 
$db_usuario = "usuario"; 
$db_password = "clave"; 
$db_base = "listas"; 
$mysqli = new mysqli($db_host, $db_usuario, $db_password, $db_base);
$mysqli->query("SET NAMES 'utf8'");
echo mysql_error();

alexisverano · #3 (**permalink**) 06/02/2014, 10:57

index.php

Código PHP:

Ver original<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript" src="ajax.js"></script>
<body>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr align="left">
    <td width="25%">Provincia:</td>
    <td width="30%">Municipio:</td>
    <td width="45%">Consejo popular:</td>
  </tr>
  <tr align="left">
    <td><?php include('provincias.php'); ?></td>
    <td><div id="listamunicipios">
      <select name="obj_municipio" id="obj_municipio" >
        <option>Seleccionar...</option>
      </select>
    </div></td>
    <td><table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><div id="listaconsejos">
          <select name="obj_consejos" id="obj_consejos">
            <option>Seleccionar...</option>
          </select>
        </div></td>
        <td></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

alexisverano · #4 (**permalink**) 06/02/2014, 11:00

provincias.php

Código PHP:

Ver original<select id="obj_provincia" onchange="mostrarMunicipios()">
<option value="">Seleccionar...</option>
<?php 
require('conexion.php');
$rs_prov = $mysqli->query("SELECT * FROM nm_provincias");
while($row_prov = $rs_prov->fetch_assoc()){
?>                        
<option value="<?php echo $row_prov['id']; ?>"><?php echo $row_prov['provincia']; ?></option>
<?php } ?>                          
</select>

municipios.php

Código PHP:

Ver original<select id="obj_municipio" onchange="mostrarConsejos()">
<option value="">Seleccionar...</option>
<?php 
require('conexion.php');
$rs_mun = $mysqli->query("SELECT * FROM nm_municipios WHERE idprovincia='".$_POST['idprov']."'");
while($row_mun = $rs_mun->fetch_assoc()){
?>                        
<option value="<?php echo $row_mun['id']; ?>"><?php echo $row_mun['municipio']; ?></option>
<?php } ?>                          
</select>

consejos.php

Código PHP:

Ver original<select id="obj_consejos">
<option value="">Seleccionar...</option>
<?php 
require('conexion.php');
$rs_cp = $mysqli->query("SELECT * FROM nm_consejos WHERE idmunicipio='".$_POST['idmun']."'");
while($row_cp = $rs_cp->fetch_assoc()){
?>                        
<option value="<?php echo $row_cp['id']; ?>"><?php echo $row_cp['consejos']; ?></option>
<?php } ?>                          
</select>

alexisverano · #5 (**permalink**) 06/02/2014, 11:03

FINALMENTE:

ajax.js

Código Javascript:

Ver original//========================
//CREACION DEL OBJETO AJAX
//========================
function objetoAjax(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
        }
    }
 
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
 
//==================
function mostrarMunicipios(){
 
    divResultado = document.getElementById('listamunicipios');
    prov=document.getElementById('obj_provincia').value;
 
    ajax=objetoAjax();
    ajax.open("POST", "municipios.php");
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
            divResultado.innerHTML = ajax.responseText
        }
    }
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    ajax.send("idprov="+prov)
}
 
 
//==================
function mostrarConsejos(){
 
    divResultado = document.getElementById('listaconsejos');
    mun=document.getElementById('obj_municipio').value;
 
    ajax=objetoAjax();
    ajax.open("POST", "consejos.php");
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
            divResultado.innerHTML = ajax.responseText
        }
    }
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    ajax.send("idmun="+mun)
}

alexisverano · #6 (**permalink**) 06/02/2014, 11:12

Solo resta hacer el completamiento de la base de datos, para esto es aconsejable hacer un manager, para introducir las provincias, municipios y consejos de forma tal que cada cual tome el identificador del lugar que le precede.

jonni09lo · #7 (**permalink**) 06/02/2014, 12:48

Hola, algunas correcciones:

No veo que relaciones con FK las diferentes tablas de la base de datos algo que considero de que es fundamental. A parte de que si el id de provincias es 11 y lo declaras como INT, el idprovincia de municipios debe de ser un INT y con el mismo tamaño que la tabla padre (11), lo mismo ocurre con los consejos.

Si usas mysqli no veo necesidad de esta línea:

Cita:

Iniciado por alexisverano

Código PHP:

Ver originalecho mysql_error();

Te recomiendo que si vas a mostrar un ejemplo de una página completa le pongas el DOCTYPE y un head ya que la etiqueta meta debe de ir dentro de esta.

Cita:

Iniciado por alexisverano

index.php

Código PHP:

Ver original<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" language="javascript" src="ajax.js"></script>
</head>
<body>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr align="left">
    <td width="25%">Provincia:</td>
    <td width="30%">Municipio:</td>
    <td width="45%">Consejo popular:</td>
  </tr>
  <tr align="left">
    <td><?php include('provincias.php'); ?></td>
    <td><div id="listamunicipios">
      <select name="obj_municipio" id="obj_municipio" >
        <option>Seleccionar...</option>
      </select>
    </div></td>
    <td><table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><div id="listaconsejos">
          <select name="obj_consejos" id="obj_consejos">
            <option>Seleccionar...</option>
          </select>
        </div></td>
        <td></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

El require_once lo puedes colocar en el index en vez de cada include... creo que es más óptimo por mantenimiento de código

Saludos

alexisverano · #8 (**permalink**) 12/02/2014, 09:51

Cita:

Iniciado por jonni09lo

El require_once lo puedes colocar en el index en vez de cada include... creo que es más óptimo por mantenimiento de código

Esto, en un inicio lo tenia asi, pero no funcionaba, lo tuve que poner en los tres includes, para que funcionara.

alexisverano · #9 (**permalink**) 12/02/2014, 09:58

Cita:

Iniciado por jonni09lo

No veo que relaciones con FK las diferentes tablas de la base de datos algo que considero de que es fundamental...

No veo necesidad de esto, ya que de la forma que esta funcionado, lo que yo hago es capturar el ID de cada elemento en la lista y pasarlo con AJAX hacia el SELECT de la otra lista por POST.

De todos modos, "jonni09lo", si tienes mas sugerencias enviamelas para hacer mas eficiente los select dependientes.

Gracias...

alexisverano · #10 (**permalink**) 12/02/2014, 10:05

Con la modificacion de la extructura de las tablas, quedarian asi.

Código SQL:

Ver originalCREATE TABLE IF NOT EXISTS `nm_provincias` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `provincia` VARCHAR(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Código SQL:

Ver originalCREATE TABLE IF NOT EXISTS `nm_municipios` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `idprovincia` INT(11) DEFAULT NULL,
  `municipio` VARCHAR(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Código SQL:

Ver originalCREATE TABLE IF NOT EXISTS `nm_consejos` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `idmunicipio` INT(11) DEFAULT NULL,
  `consejos` VARCHAR(70) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

jonni09lo · #11 (**permalink**) 12/02/2014, 10:08

Pues hasta que no corrijas los errores que te comenté pues no sé que más podría surgir.

Y sobre la base de datos, dices que no ves necesidad, pero si un analista de bases de datos ve lo que hiciste, de seguro se quedará medio calvo

La razón es simple, consistencia de datos, las correcciones que te dí son en aras de las buenas prácticas.

Mira este tema, de seguro te ayudará a entender un poco más la necesidad y utilidad a la hora de usar FK.

Saludos

marcasvi · #12 (**permalink**) 26/02/2014, 05:12

Hola soy nuevo en esto, pero he cogido todos los archivos aquí descritos y he cambiado los parámetros de acceso a bd, tablas y columnas y no me funciona.

(No he probado a hacerlo tal cual aparece aquí con los datos de bd, tablas y columnas que se plantean)

En el index.php, me aparece sólo el selec de provincias pero no me lee ningún dato de la tabla a la que le pido.

Si lo hago todo en php consigo hacer un combobox dependiente a dos niveles, y funciona perfectamente sin usar js (del que no tengo ni idea).

younitd · #13 (**permalink**) 11/05/2014, 16:25

Muchas gracias "alexisverano". Soy nuevo en php y tengo semanas buscando un codigo como este que contenga: 3 Select y usando MYSQLI. Mil gracias. Solo para citar lo importante que son estos aportes es importante decirte que me motive a Registrarme a este Foto principalmente para agradecer este tipo de aportes.

rakshaka · #14 (**permalink**) 19/09/2014, 06:06

Ésto sirve también para hacer 4 o 5 niveles no?