Select Dinámico PHP-JavaScript

ZeroDrako · #1 (**permalink**) 03/04/2014, 11:10

Hola, estoy intentando hacer un Select dinámico para mi pagina, la idea es que el se hagan hasta 3 select por parte del usuario en un formulario.
Encontré un ejemplo que hace exactamente eso, pero por alguna razón a mi no me funciona....Dejo el código de ejemplo:

HTML (index.html)

Código HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Seleccion</title>
	<script type="text/javascript" src="jquery.2.1,0.js"></script>
</head>
<body>
	<select id="CboDepartamentos"></select>
	<select id="CboProvincias"></select>
	<select id="CboDistritos"></select>

<script type="text/javascript">
$(document).ready(function(){
	$.ajax({
		url:'datos.php?Accion=GetDepartamentos',
		success: function(Datos){
			for ( x=0;  x<Datos.length; x++ )
			{
				$("#CboDepartamentos").append(new Option(Datos[x].Departamento, Datos[x].IdDepartamento));
			}
		}
	})

	$('#CboDepartamentos').Change(function(){
		$('#CboProvincias,#CboDistritos').empty();
		$.getJSON('datos.php',{Action:'GetProvincias',IdDepartamento:$('#CboDepartamentos option:selected').val()}, function(Datos){
			for( x=0; x<Datos.length; x++ )
			{
				$("#CboProvincias").append(new Option(Datos[x].Provincia, Datos[x].IdProvincia));
			}
		})
	});

	$('#CboProvincias').change(function(){
		$('#CboDistritos').empty();
		$.getJSON('datos.php', {Action:'GetDistritos',IdProvincia:$('#CboProvincias option:selected').val()}, function(Datos){
			for( x=0; x<Datos.length; x++ )
			{
				$("#CboDistritos").append(new Option(Datos[x].Distritos, Datos[x].IdDistritos));
			}
		})
	});
});
</script>

</body>
</html>

PHP (datos.php)

Código PHP:

  <?php

 
    mysql_connect('localhost','Visitante','');

    mysql_select_db('peru');

    $Accion = $_REQUEST['Accion'];

 
    if(is_callable($Accion))

    {

        $Accion();

    }

 
    function GetDepartamentos()

    {

        header('Content-Type: application/json');

        $Departamentos = array();

        $Consulta = mysql_query("SELECT¨* FROM departamentos");

        while($Fila = mysql_fetch_assoc($Consulta))

        {

            $Departamentos[] = $Fila;

        }

        echo json_encode($Departamentos);

    }

 
    function GetProvincias()

    {

        header('Content-Type: application/json');

        $Provincias = array();

        $Consulta = mysql_query("SELECT¨* FROM provincias WHERE IdDepartamento = ".$_REQUEST['IdDepartamento']);

        while($Fila = mysql_fetch_assoc($Consulta))

        {

            $Provincias[] = $Fila;

        }

        echo json_encode($Provincias);

    }

 
    function GetDistritos()

    {

        header('Content-Type: application/json');

        $Distritos = array();

        $Consulta = mysql_query("SELECT¨* FROM distritos WHERE IdProvincia = ".$_REQUEST['IdProvincia']);

        while($Fila = mysql_fetch_assoc($Consulta))

        {

            $Distritos[] = $Fila;

        }

        echo json_encode($Distritos);

    }

 
?>

DataBase (peru)

Código:

CREATE DATABASE  IF NOT EXISTS `peru` /*!40100 DEFAULT CHARACTER SET utf8 */;
USE `peru`;

CREATE TABLE IF NOT EXISTS `departamentos` (
  `IdDepartamento` int(11) NOT NULL AUTO_INCREMENT,
  `Departamento` varchar(150) NOT NULL,
  PRIMARY KEY (`IdDepartamento`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;


INSERT INTO `departamentos` (`IdDepartamento`, `Departamento`) VALUES
(1, 'AMAZONAS'),
(2, 'ANCASH'),
(3, 'APURIMAC'),
(4, 'AREQUIPA'),
(5, 'AYACUCHO');

CREATE TABLE IF NOT EXISTS `distritos` (
  `IdDistrito` int(11) NOT NULL AUTO_INCREMENT,
  `IdProvincia` int(11) NOT NULL,
  `Distrito` varchar(150) NOT NULL,
  PRIMARY KEY (`IdDistrito`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;

INSERT INTO `distritos` (`IdDistrito`, `IdProvincia`, `Distrito`) VALUES
(1, 1, 'BALSA'),
(2, 1, 'CHETOS'),
(3, 2, 'GRANADA'),
(4, 2, 'HUANCAS'),
(5, 3, 'LEVANTO'),
(6, 3, 'MOLINO'),
(7, 4, 'SALSAS'),
(8, 4, 'LEIME'),
(9, 5, 'MONTEVIDEO'),
(10, 5, 'PANAMA');


CREATE TABLE IF NOT EXISTS `provincias` (
  `IdProvincia` int(11) NOT NULL AUTO_INCREMENT,
  `IdDepartamento` int(150) NOT NULL,
  `Provincia` varchar(150) NOT NULL,
  PRIMARY KEY (`IdProvincia`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;


INSERT INTO `provincias` (`IdProvincia`, `IdDepartamento`, `Provincia`) VALUES
(1, 1, 'CHACHA'),
(2, 1, 'BAGUA'),
(3, 2, 'CONDOR'),
(4, 2, 'LUYA'),
(5, 3, 'RODRI'),
(6, 3, 'UTCUBA'),
(7, 4, 'HUAREZ'),
(8, 4, 'AIJA'),
(9, 5, 'ANTON'),
(10, 5, 'ASONCION');

El ejemplo es igual a lo que quiero hacer solo cambia el nombre de las tablas y campos.
Espero me puedan ayudar a corregir el código

elporfirio · #2 (**permalink**) 03/04/2014, 16:12

Aqui te dejo un video de como hacerlo, en realidad son 2 pues se explica el porque dle funcionamiento y como funciona correctamente:

http://elporfirio.com/wp/2013/10/como-hacer-un-combo-select-option-dinamico/

phoneval · #3 (**permalink**) 04/04/2014, 05:20

Yo aprendi a usarlo para las ciudades con esta web

http://www.webnivel.net/simple-combo...es-con-jquery/

alexisverano · #4 (**permalink**) 04/04/2014, 13:50

En esta URL deje como hacer tres select combinados, revisa el tema y adaptalo a tus necesidades. Utilizando PHP, MySQL y AJAX.

http://www.forosdelweb.com/f18/aport...veles-1090358/

ZeroDrako · #5 (**permalink**) 04/04/2014, 14:33

Gracias a todos por su ayuda, ya quedo implementado en mi web

Me fueron de gran utilidad la inflacionario