[APORTE] Select Totalmente Dinamico

AFelipeTrujillo · 16 Febrero 2010, 22:08 PM

Les dejo el código de un select totalmente dinámico y con persistencia... salu2

ajax.sql

-- phpMyAdmin SQL Dump
-- version 3.1.1
-- http://www.phpmyadmin.net
--
-- Servidor: localhost
-- Tiempo de generación: 11-01-2010 a las 19:38:51
-- Versión del servidor: 5.1.38
-- Versión de PHP: 5.2.8

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- Base de datos: `ajax`
--

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `ciudades`
--

CREATE TABLE IF NOT EXISTS `ciudades` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `id_mun` int(11) NOT NULL,
  `ciu_nombre` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=15 ;

--
-- Volcar la base de datos para la tabla `ciudades`
--

INSERT INTO `ciudades` (`id`, `id_mun`, `ciu_nombre`) VALUES
(1, 1, 'Bogota'),
(2, 1, 'Girardot'),
(3, 1, 'Fusafasuga'),
(4, 1, 'Sopo'),
(5, 1, 'Chia'),
(6, 1, 'Tocaima'),
(7, 2, 'Medellin'),
(8, 2, 'Envigado'),
(9, 2, 'Itagui'),
(10, 2, 'Jardin'),
(11, 3, 'Neiva'),
(12, 3, 'Pitalito'),
(13, 3, 'Rivera'),
(14, 3, 'Timana');

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `municipios`
--

CREATE TABLE IF NOT EXISTS `municipios` (
  `mun_nombre` varchar(20) NOT NULL,
  `id` int(11) NOT NULL AUTO_INCREMENT,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

--
-- Volcar la base de datos para la tabla `municipios`
--

INSERT INTO `municipios` (`mun_nombre`, `id`) VALUES
('Cundinamarca', 1),
('Antioquia', 2),
('Huila', 3);

conexion.php

Código (php) [Seleccionar]

<?php 
#  AUTHOR: 4ng3r
#  Aplicacion: Select Totalmente Dinamico    
#  URL: http://angercode.wordpress.com
#  URL: http://foro.project-ric.org
#  Conexion a la Base de datos

function conectar(){
    if(mysql_connect("127.0.0.1","root","")){
        return mysql_select_db("ajax");    
    }else{
        return FALSE;    
    }
}

function desconectar(){
    mysql_close();
}

function consulta_Mun($val){
    $query = sprintf("SELECT %s FROM municipios",mysql_real_escape_string($val));
    $sql=mysql_query($query);
    $i=0;
    $valores = Array();
    while ($row = mysql_fetch_assoc($sql)){
        $valores[$i]=$row["$val"];
        $i++;
    }
    return $valores;
}

?>

interfaz.php

Código (php-brief) [Seleccionar]

<?php
#  AUTHOR: 4ng3r
#  Aplicacion: Select Totalmente Dinamico    
#  URL: http://angercode.wordpress.com
#  URL: http://foro.project-ric.org
#  Interfaz

include_once("conexion.php");
if(conectar()){
        function cargarMunicipios(){
        $nom_M = consulta_Mun("mun_nombre");
        $id_M = consulta_Mun("id");
        echo "<select name='municipios' id ='municipios' onChange='cargador(this.id)'>";
        echo "<option value='0'>Elija un Municipio</option>";
        for($i=0;$i<sizeof($nom_M);$i++){
            echo "<option value=".$id_M[$i].">".$nom_M[$i]."</option>";    
        }
        echo "</select>";
    }

?>

<html>

    <head>
        <script src="script.js"></script>
    </head>
    
    <body>
        <div id="independiente">
         <?=cargarMunicipios()?>
        </div>
        <br>
        <div id="dependiente">
            <select id="ciudades" name="ciudades" disabled="disable">
                <option value="0">Elija una Ciudad</option>
            </select>
        </div>
        <br><br>
        <div id="cargando"></div>                   
            <?php    
} // END IF
            ?>
            
                
        </select>    
    </body>
    
</html>

script.js

Código (javascript) [Seleccionar]

//  AUTHOR: 4ng3r
//     Aplicacion: Select Totalmente Dinamico
//  URL: http://angercode.wordpress.com
//  URL: http://foro.project-ric.org
//  Cargador de Contenido

function contenidoXML(){
    return XMLHttpRequest();
}

// Declaro los compoenentes selects que va a utilizar mi aplicacion
// y debe coconrdar con el ID que le pusimos en el HTML

var selectsHTML = new Array();
selectsHTML[0]="municipios";
selectsHTML[1]="ciudades";

function cargador(idSelect){
    var selectIndependiente=document.getElementById(idSelect);
    // Seleccionamos el Select que depende al select que le corresponda el id=idSelect
    var selectDependiente= buscarSelect(selectsHTML,idSelect)+1;
    var option = selectIndependiente.options[selectIndependiente.selectedIndex].value;
    // Validamos si el usuario elijio la primero opcion, es decir, Elija un Municipio
    // y envio un advertencia
    if(option==0){
        // obtengo el Elemento
        selectD = document.getElementById(selectsHTML[selectDependiente]);
        // Borro los elementos que hay en el
        selectD.length=0;

        var mensaje = document.createElement("option");
        mensaje.value=0;
        mensaje.innerHTML="Debe elegir un Municipio !!!";
        // Incrusto el nuevo nodo
        selectD.appendChild(mensaje)
        selectD.disabled=true;
    }else{
        // Obtenemos el id del select que debemos cargar
        var idSelecteD = selectsHTML[selectDependiente];
        var selectD = document.getElementById(idSelecteD);
        var ajax = contenidoXML();
        ajax.open("GET","respuesta.php?option="+option,true);
        ajax.onreadystatechange=function(){
            if (ajax.readyState==1){
                document.getElementById("cargando").innerHTML="<img src='cargando.gif'>"
            }

            if(ajax.readyState==4){
                selectD.parentNode.innerHTML=ajax.responseText;
                document.getElementById("cargando").innerHTML="Consulta Satisfactoria"
            }
        }
        ajax.send(null);
    }
}

// Funcion para encontrar si el selec existe
function buscarSelect(arreglo , id){
    var x=0;
    while (arreglo[x]){
        if(arreglo[x]==id){
            return x;
        }
        x++;
    }
    return null;
}

Respuesta.php

Código (php) [Seleccionar]

<?php
#  AUTHOR: 4ng3r
#  Aplicacion: Select Totalmente Dinamico
#  URL: http://angercode.wordpress.com
#  URL: http://foro.project-ric.org
#  Respuesta

include('conexion.php');
conectar();
$option = $_GET['option'];
$query = "SELECT * FROM ciudades WHERE id_mun=".$option;
$sql=mysql_query($query);
echo "<select name = 'ciudades' id='ciudades'>";
echo "<option>Elija un Ciudad</option>";
while($row = mysql_fetch_assoc($sql)){
    echo "<option value='".$row['id']."'>".$row['ciu_nombre']."</option>";
}
echo "</select>";
?>

DESCARGAR

RESULTADO

Nakp · 16 Febrero 2010, 22:28 PM

grandioso aporte... pero no funciona en ie XD, es cuestion de hacerle un arreglo menor a tu funcion contenidoXML()

lo muevo a php

AFelipeTrujillo · 16 Febrero 2010, 22:40 PM

jeje gracias hombre nunca lo habia probado en IE lo odio pero estare en la mira de arreglarlo... gracas

Test Foro de elhacker.net SMF 2.1

[APORTE] Select Totalmente Dinamico

AFelipeTrujillo

Nakp

AFelipeTrujillo