Select en php

patico83 · #1 (**permalink**) 26/03/2008, 08:04

Hola:

Necesito urgente un ejemplo donde segun lo que seleccione de un select se generere otro, por ejemplo paises y ciudades, pero donde se utilize php y javascript.

Gracias

T4ke0veR · #2 (**permalink**) 26/03/2008, 08:40

Hola hermano bueno prueba con este...

Creas un archivo conexion.php

Código PHP:

  <?php

function conectar()

{

    mysql_connect("localhost", "root", "");

    mysql_select_db("basededatos");

}

 
function desconectar()

{

    mysql_close();

}

?>

luego select_dependientes_proceso.php

Código PHP:

  <?php

// Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido

$listadoSelects=array(

"categoria"=>"lista_categoria",

"subcategoria"=>"lista_subcategoria"

"linea"=>"lista_linea"

);

 
function validaSelect($selectDestino)

{

    // Se valida que el select enviado via GET exista

    global $listadoSelects;

    if(isset($listadoSelects[$selectDestino])) return true;

    else return false;

}

 
function validaOpcion($opcionSeleccionada)

{

    // Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico

    if(is_numeric($opcionSeleccionada)) return true;

    else return false;

}

 
$selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"];

 
if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))

{

    $tabla=$listadoSelects[$selectDestino];

    include 'conexion.php';

    conectar();

    $consulta=mysql_query("SELECT id, opcion FROM $tabla WHERE relacion='$opcionSeleccionada'") or die(mysql_error());

    desconectar();

    

    // Comienzo a imprimir el select

    echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";

    echo "<option value='0'>Elige</option>";

    while($registro=mysql_fetch_row($consulta))

    {

        // Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion

        $registro[1]=htmlentities($registro[1]);

        // Imprimo las opciones del select

        echo "<option value='".$registro[0]."'>".$registro[1]."</option>";

    }            

    echo "</select>";

}

?>

Luego select_dependientes.php

Código PHP:

  <?php

function generaPaises()

{

    include 'conexion.php';

    conectar();

    $consulta=mysql_query("SELECT id, nombre FROM categoria");

    desconectar();

 
    // Voy imprimiendo el primer select compuesto por los paises

    echo "<select name='nombre' id='nombre' onChange='cargaContenido(this.id)'>";

    echo "<option value='0'>Elige</option>";

    while($registro=mysql_fetch_row($consulta))

    {

        echo "<option value='".$registro[0]."'>".$registro[1]." ".registro[2]."</option>";

    }

    echo "</select>";

}

?>

 
<html lang="es">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>AJAX, Ejemplos: Combos (select) dependientes, codigo fuente - ejemplo</title>

<link rel="stylesheet" type="text/css" href="select_dependientes.css">

<script type="text/javascript" src="select_dependientes.js"></script>

</head>

 
<body>

 
            <div id="demo" style="width:600px;">

                <div id="demoDer">

                    <select disabled="disabled" name="estados" id="categoria">

                        <option value="0">Selecciona opci&oacute;n...</option>

                    </select>

                </div>

                <div id="demoIzq"><?php generaSubcategoria(); ?></div>

</div>

            

</body>

</html>

T4ke0veR · #3 (**permalink**) 26/03/2008, 08:42

Luego vas a crear un archivo .js llamado select_dependientes.js

Código PHP:

  function nuevoAjax()

{ 

    /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por

    lo que se puede copiar tal como esta aqui */

    var xmlhttp=false;

    try

    {

        // Creacion del objeto AJAX para navegadores no IE

        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");

    }

    catch(e)

    {

        try

        {

            // Creacion del objet AJAX para IE

            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

        }

        catch(E)

        {

            if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();

        }

    }

    return xmlhttp; 

}

 
// Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.

var listadoSelects=new Array();

listadoSelects[0]="Categoria";

listadoSelects[1]="SubCategoria";

listadoSelects[2]="Linea";

 
function buscarEnArray(array, dato)

{

    // Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra

    var x=0;

    while(array[x])

    {

        if(array[x]==dato) return x;

        x++;

    }

    return null;

}

 
function cargaContenido(idSelectOrigen)

{

    // Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba

    var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;

    // Obtengo el select que el usuario modifico

    var selectOrigen=document.getElementById(idSelectOrigen);

    // Obtengo la opcion que el usuario selecciono

    var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;

    // Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."

    if(opcionSeleccionada==0)

    {

        var x=posicionSelectDestino, selectActual=null;

        // Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito

        while(listadoSelects[x])

        {

            selectActual=document.getElementById(listadoSelects[x]);

            selectActual.length=0;

            

            var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opci&oacute;n...";

            selectActual.appendChild(nuevaOpcion);    selectActual.disabled=true;

            x++;

        }

    }

    // Compruebo que el select modificado no sea el ultimo de la cadena

    else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])

    {

        // Obtengo el elemento del select que debo cargar

        var idSelectDestino=listadoSelects[posicionSelectDestino];

        var selectDestino=document.getElementById(idSelectDestino);

        // Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen

        var ajax=nuevoAjax();

        ajax.open("GET", "select_dependientes_proceso.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);

        ajax.onreadystatechange=function() 

        { 

            if (ajax.readyState==1)

            {

                // Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."

                selectDestino.length=0;

                var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";

                selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;    

            }

            if (ajax.readyState==4)

            {

                selectDestino.parentNode.innerHTML=ajax.responseText;

            } 

        }

        ajax.send(null);

    }

}

y por ultimo select_dependientes_3_niveles_proceso.php

Código PHP:

  <?php

// Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido

$listadoSelects=array(

"categoria"=>"categoria",

"subcategoria"=>"subcategoria",

"linea"=>"linea"

);

 
function validaSelect($selectDestino)

{

    // Se valida que el select enviado via GET exista

    global $listadoSelects;

    if(isset($listadoSelects[$selectDestino])) return true;

    else return false;

}

 
function validaOpcion($opcionSeleccionada)

{

    // Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico

    if(is_numeric($opcionSeleccionada)) return true;

    else return false;

}

 
$selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"];

 
if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))

{

    $tabla=$listadoSelects[$selectDestino];

    include 'conexion.php';

    conectar();

    $consulta=mysql_query("SELECT id, nombre FROM $tabla WHERE relacion='$opcionSeleccionada'") or die(mysql_error());

    desconectar();

    

    // Comienzo a imprimir el select

    echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";

    echo "<option value='0'>Elige</option>";

    while($registro=mysql_fetch_row($consulta))

    {

        // Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion

        $registro[1]=htmlentities($registro[1]);

        // Imprimo las opciones del select

        echo "<option value='".$registro[0]."'>".$registro[1]."</option>";

    }            

    echo "</select>";

}

?>

estos ejemplos los baje y me funcionaron a la perfeccion... como veras es a tres niveles... si lo necesitas a dos avisame y tambien t lo paso :)

saludos

patico83 · #4 (**permalink**) 26/03/2008, 11:55

Hola, muchas gracias, y porfa si pasame el de los 2 niveles.