Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Combos Dependientes

Estas en el tema de Combos Dependientes en el foro de Frameworks JS en Foros del Web. Buenas amigos como estan? Estoy realizando un formulario donde uso combos dependientes.. Para esto estoy usando un codigo de ejemplo que encontre por ahi que ...
  #1 (permalink)  
Antiguo 08/08/2011, 14:00
 
Fecha de Ingreso: noviembre-2009
Mensajes: 89
Antigüedad: 14 años, 4 meses
Puntos: 1
Exclamación Combos Dependientes

Buenas amigos como estan?

Estoy realizando un formulario donde uso combos dependientes.. Para esto estoy usando un codigo de ejemplo que encontre por ahi que usa Ajax, Php...

Les dejo el codigo..

select_dependientes.php
Código PHP:
<?php
function generaSelect()
{
    include 
'conexion.php';
    
conectar();
    
$consulta=mysql_query("SELECT id, opcion FROM select_1");
    
desconectar();

    
// Voy imprimiendo el primer select compuesto por los paises
    
echo "<select name='select1' id='select1' onChange='cargaContenido(this.id)'>";
    echo 
"<option value='0'>Elige</option>";
    while(
$registro=mysql_fetch_row($consulta))
    {
        echo 
"<option value='".$registro[0]."'>".$registro[1]."</option>";
    }
    echo 
"</select>";
}
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- 



Este contenido es de libre uso y modificación bajo la siguiente licencia: http://creativecommons.org/licenses/by-nc-sa/2.5/deed.es

Sobre el reconocimiento:
Todos los códigos han sido realizados con la idea de que sirvan para colaborar con el aprendizage de aquellos que se están introduciendo
en estas tecnologías y no con el objetivo de que sean utilizados directamente en sitios web. No obstante si utilizas algún código en tu sitio 
(ya sea sin modificar o modificado), o si ofreces los fuentes para descargar o si bien decides publicar alguno de los artículos debes cumplir con:
-Colocar un link a http://www.formatoweb.com.ar/ajax/ visible por tus usuarios como forma de mención a la fuente original del contenido.
-Enviar un correo a [email protected] informando la URL donde el contenido se ha publicado o se va a publicar en un futuro.
-Si publicas los fuentes para descargar este texto no debe ser eliminado ni alterado.

Más ejemplos y material sobre AJAX en: http://www.formatoweb.com.ar/ajax/
Cualquier sugerencia, crítica o comentario son bienvenidos.
Contacto: [email protected]



-->

<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>AJAX, Ejemplos: Combos (select) dependientes de 3 niveles, codigo fuente - ejemplo</title>
<link rel="stylesheet" type="text/css" href="select_dependientes_3_niveles.css">
<script type="text/javascript" src="select_dependientes_3_niveles.js"></script>
</head>

<body>

            <div id="demo" style="width:600px;">
                <div id="demoDer">
                    <select disabled="disabled" name="select3" id="select3">
                        <option value="0">Selecciona opci&oacute;n...</option>
                    </select>
                </div>
                <div id="demoMed">
                    <select disabled="disabled" name="select2" id="select2">
                        <option value="0">Selecciona opci&oacute;n...</option>
                    </select>
                </div>
                <div id="demoIzq"><?php generaSelect(); ?></div>
            </div>

</body>
</html>
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]="select1";
listadoSelects[1]="select2";
listadoSelects[2]="select3";

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(listadoSelectsidSelectOrigen)+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=posicionSelectDestinoselectActual=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=0nuevaOpcion.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_3_niveles_proceso.php?select="+idSelectDestino+"&opcion="+opcionSeleccionadatrue);
        
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=0nuevaOpcion.innerHTML="Cargando...";
                
selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;    
            }
            if (
ajax.readyState==4)
            {
                
selectDestino.parentNode.innerHTML=ajax.responseText;
            } 
        }
        
ajax.send(null);
    }

select_dependiente_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(
"select1"=>"select_1",
"select2"=>"select_2",
"select3"=>"select_3"
);

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>";
}
?>
Todo me funciona bien.. lo que quiero hacer es activar un 4to Select con la misma informacion del 3ero... Osea que el 2do Select me active el 3ero y el 4to con la misma informacion..

Espero me puedan ayudar si no es mucha molestia, que esten bien..
  #2 (permalink)  
Antiguo 08/08/2011, 16:35
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 7 meses
Puntos: 1532
Respuesta: Combos Dependientes

en el foro estamos para ayudar, no para hacerte el trabajo, al menos intenta hacerlo, ya con la lógica de 3 puedes llegar al 4to, además de qe es uno de los temas más recurrentes del foro y de seguro buscando hallas la solución, un poco de empeño!!!!
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 09/08/2011, 06:55
 
Fecha de Ingreso: noviembre-2009
Mensajes: 89
Antigüedad: 14 años, 4 meses
Puntos: 1
Respuesta: Combos Dependientes

Gracias por tu respuesta ... si coloque aqui mi duda es por que e buscado y no e logrado conseguirlo..

De hacer un cuarto combo lo puedo hacer solo que lo que quiero es que ese cuarto combo tenga la misma informacion que el tercero y se activen al mismo tiempo..

Gracias ;)
  #4 (permalink)  
Antiguo 11/08/2011, 11:02
 
Fecha de Ingreso: noviembre-2009
Mensajes: 89
Antigüedad: 14 años, 4 meses
Puntos: 1
Respuesta: Combos Dependientes

Alguna ayuda??? :(
  #5 (permalink)  
Antiguo 11/08/2011, 13:13
 
Fecha de Ingreso: mayo-2011
Mensajes: 55
Antigüedad: 12 años, 9 meses
Puntos: 1
Respuesta: Combos Dependientes

en los FAQ'S de este foro encuentras un tema que te puede ayudar o talvez este video tutorial te ayude

http://www.cesarcancino.com/videotut...mysql-n54.html
  #6 (permalink)  
Antiguo 11/08/2011, 13:29
 
Fecha de Ingreso: noviembre-2009
Mensajes: 89
Antigüedad: 14 años, 4 meses
Puntos: 1
Respuesta: Combos Dependientes

Cita:
Iniciado por bon3 Ver Mensaje
en los FAQ'S de este foro encuentras un tema que te puede ayudar o talvez este video tutorial te ayude

[URL="http://www.cesarcancino.com/videotutorial-25-del-curso-de-php-y-mysql-n54.html"]http://www.cesarcancino.com/videotutorial-25-del-curso-de-php-y-mysql-n54.html[/URL]
Amigo Bon muchas gracias por tu respuesta, pero ese tutorial es de php y msql unicamente, yo estoy usando Ajax tambien.. Ayudenmeeee por favor :(
  #7 (permalink)  
Antiguo 12/08/2011, 10:06
 
Fecha de Ingreso: julio-2011
Ubicación: Barcelona
Mensajes: 6
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: Combos Dependientes

en ajax agrega un array mas:

Código:
var listadoSelects=new Array();
listadoSelects[0]="select1";
listadoSelects[1]="select2";
listadoSelects[2]="select3";
listadoSelects[3]="select4";
y en el "select_dependientes_3_niveles.php" agrega un nuevo div con su respectivo select4
  #8 (permalink)  
Antiguo 12/08/2011, 11:30
 
Fecha de Ingreso: noviembre-2009
Mensajes: 89
Antigüedad: 14 años, 4 meses
Puntos: 1
Exclamación Respuesta: Combos Dependientes

Cita:
Iniciado por allok58 Ver Mensaje
en ajax agrega un array mas:

Código:
var listadoSelects=new Array();
listadoSelects[0]="select1";
listadoSelects[1]="select2";
listadoSelects[2]="select3";
listadoSelects[3]="select4";
y en el "select_dependientes_3_niveles.php" agrega un nuevo div con su respectivo select4
Buenas Allok58, Gracias por tu respuesta, Eso ya lo realice y nada... porque segun la logica eso lo esta haciendo es que segun lo que selecciones en el select3 activara el select 4 y lo que deseo es que depende de lo que seleccione en el Select2 y me active el 3 y el 4 con la misma informacion estos dos ultimos.. no se si me explico amigo... Ayuuuuuda :(
  #9 (permalink)  
Antiguo 15/08/2011, 12:57
 
Fecha de Ingreso: noviembre-2009
Mensajes: 89
Antigüedad: 14 años, 4 meses
Puntos: 1
Respuesta: Combos Dependientes

Ayuuuuuda por favor...

Etiquetas: combos, dependientes, html, php, registro, sql, tabla, formulario, usuarios
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 00:45.