Listas dependientes

Adell · #1 (**permalink**) 04/04/2009, 15:32

Hola necesito ayuda para hacer un listado como el que se muestra en la siguiente imagen, la verdad de javascript manejo poco, asi que si alguien me puede pasar un tutorial o darme una idea de como se hace se lo agradecere

saludos

xurxinho · #2 (**permalink**) 05/04/2009, 02:38

Yo hago esto, ten en cuenta los id, tienen ques er diferentes, te puse enlaces de ancla pero tu pones la imagen, y colocas todo en una tabla yo te lo coloqué apelotonado

Código:

<script type='text/javascript'>
function selector(s,s2){
	if(selected(s)){
		putSelect(s2,getTextSelect(s),getValueSelect(s));
		delSelect(s);
	}
	
}

function putSelect(id,texto,valor){
    var sel=document.getElementById(id);
	sel[sel.length]= new Option(texto,valor);
}
function getTextSelect(id){
		var sel=document.getElementById(id);
            // Obtenemos que posición del SELECT está seleccionada
        var indiceSeleccionado = sel.selectedIndex;
            // Si hemos seleccionado una opción válida ...
            //if (indiceSeleccionado != 0)           
                // Obtenemos el valor seleccionado
        return sel.options[indiceSeleccionado].text;

}
function getValueSelect(id){
		var sel=document.getElementById(id);
		return sel.value;
}
function delSelect(id){
		var sel=document.getElementById(id);
		if (sel.selectedIndex >= 0) {
			sel.options[sel.selectedIndex]=null;
			sel.selectedIndex=0;
		}
}
</script>	
<select id="s1" class="opciones" size="15">
<option value="directorio">Catálogo</option>
<option value="configuracion">Configuración</option>
<option value="enlace">Enlaces</option>
<optionvalue="rotativo">Rotativo</option>
</select>									
<select id="s2" class="opciones" size="15">
<option value="album">Álbum</option>
<option value="contenidos">Contenidos</option>
<option value="disenho">Diseño</option>
<option value="ficha_empresa">Ficha de Empresa</option>
<option value="microweb">Espacios</option><option value="localizacion">Localizacion</option>
</select>

<a href="#" onclick="selector('s2','s1');">Poner</a>			
<a href="#" onclick="selector('s1','s2');">Quitar</a>

Adell · #3 (**permalink**) 05/04/2009, 07:02

Muchas gracias xurxinho lo voy a probar y despues te cuento que tal anduvo

saludos

Adler · #4 (**permalink**) 05/04/2009, 07:40

Hola

Mas sencillo, por el maestro Javier_B. Solo necesitaba una pequeña modificación

Código javascript:

Ver original<style type="text/css">
select {width:80px}
</style>
<script type="text/javascript">
<!--
function pasar1() {
    obj=document.getElementById('sel1');
    if (obj.selectedIndex==-1) return;
  for (i=0; opt=obj.options[i]; i++)
    if (opt.selected) {
        valor=opt.value; // almacenar value
        txt=obj.options[i].text; // almacenar el texto
        obj.options[i]=null; // borrar el item si está seleccionado
        obj2=document.getElementById('sel2');
    opc = new Option(txt,valor);
        eval(obj2.options[obj2.options.length]=opc);    
  } 
}
 
 
 
function pasar2() {
    obj=document.getElementById('sel2');
    if (obj.selectedIndex==-1) return;
  for (i=0; opt=obj.options[i]; i++)
    if (opt.selected) {
        valor=opt.value; // almacenar value
        txt=obj.options[i].text; // almacenar el texto
        obj.options[i]=null; // borrar el item si está seleccionado
        obj2=document.getElementById('sel1');
        opc = new Option(txt,valor);
        eval(obj2.options[obj2.options.length]=opc);
  } 
}
-->
</script>
</head>
 
<body>
<p>
<label for="sel1">Origen:</label>
<select id="sel1" size="5" multiple="multiple">
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
<option value="4">Cuatro</option>
<option value="5">Cinco</option>
</select>
<label for="sel2">Destino:</label>
<select id="sel2" size="5">
</select></p>
<input type="button" value="Pasar >>" onclick="pasar1()" />
<input type="button" value="<< Pasar" onclick="pasar2()" />

Suerte

gjx2 · #5 (**permalink**) 05/04/2009, 07:46

xurxinho

Código:

function selector(s,s2){
	if(selected(s)){                     
		putSelect(s2,getTextSelect(s),getValueSelect(s));
		delSelect(s);
	}
	
}

1- Olvidaste crear la funcion " selected " , por eso tu codigo da error .
2- Los enlaces estan alreves

Debe de ser haci

Código HTML:

<a href="#" onclick="selector('s1','s2');">Poner</a>			
<a href="#" onclick="selector('s2','s1');">Quitar</a>

Modifique el codigo , y ahora luce de esta manera.

Código:

<script type='text/javascript'>

function selector(s,s2){
	if(selected(s)){
		putSelect(s2,getTextSelect(s),getValueSelect(s));
}		delSelect(s);

}

function selected(s){
var sel=document.getElementById(s);	
var index = sel.selectedIndex;
if(index>-1){
return true;
}else{return false;
}
}


function putSelect(id,texto,valor){
    var sel=document.getElementById(id);
	sel[sel.length]= new Option(texto,valor);
}

function getTextSelect(id){
		var sel=document.getElementById(id);	
        var indiceSeleccionado = sel.selectedIndex;
        return sel.options[indiceSeleccionado].text;

}

function getValueSelect(id){
		var sel=document.getElementById(id);
		return sel.value;
}

function delSelect(id){
		var sel=document.getElementById(id);
		if (sel.selectedIndex >= 0) {
		sel.options[sel.selectedIndex]=null;
		sel.selectedIndex=0;
		}
}
</script>

Código HTML:

<div>
<select id="s1" class="opciones" size="15">

<option value="directorio">Catálogo</option>
<option value="configuracion">Configuración</option>
<option value="enlace">Enlaces</option>
<option value="rotativo">Rotativo</option>

</select>	
		
						
<select id="s2" class="opciones" size="15">
<option value="album">Álbum</option>
<option value="contenidos">Contenidos</option>
<option value="disenho">Diseño</option>
<option value="ficha_empresa">Ficha de Empresa</option>
<option value="microweb">Espacios</option><option value="localizacion">Localizacion</option>
</select>

<a href="#" onclick="selector('s1','s2');">Poner</a>			
<a href="#" onclick="selector('s2','s1');">Quitar</a>
</div>

Adell · #6 (**permalink**) 05/04/2009, 10:39

Gracias por la correccion jgx2 funciona perfecto.
Adler gracias a ti tambien por la otra solucion que diste la voy aprobar a ver que tal funciona

saludos

Adell · #7 (**permalink**) 06/04/2009, 06:11

Hola de nuevo, confirmo que todo funciona perfecto, lo que no pude lograr es que el javascript me tome multiples selecciones, no se como hacer, supongo que se tiene que guardar en un array

gracias de nuevo
saludos

Adler · #8 (**permalink**) 06/04/2009, 06:58

Hola

Veamos si esto te ayuda

Suerte

Adell · #9 (**permalink**) 07/04/2009, 05:59

Gracias por el link adler, tenia pensado que se hacia asi.
Pero tengo un ultimo problema con todo esto, he intentado modificar el javascript para que me permita hacer seleccion multiple del listado, es decir que al marcar con shift y/o control me permita pasar muchos elementos al otro listado de una sola vez, pero no lo logre, esto me seria util ya que el listado contendra unos 100 a 200 elementos, si me pueden dar una mano con esto ultimo se los agradecere

saludos