Problema con arreglos

tampon · #1 (**permalink**) 15/07/2009, 21:57

Hola a todos, antes de comenzar una nueva pregunta sin haber concluido esta, reflexiono un poco y pienso una forma mas practica de plantear mi problema.

Este es el codigo que me da dolor de cabeza:

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--
Como veras algunos valores dentro del arreglo C1 pareceran desordenados sin sentido alguno, pero la forma de la pagina
requiere precentarlos asi; Pense en arreglos anidados como:

	a[1][2] = new slctr...
	
	ó
	
	eliminando campos vacios con:
	
	delete [2];
	
	pero en verdad que no se bien como seria la sintaxis, se que debe de ser algo simple, incluso usando un if para 
	eliminar los campos dentro del arreglo, pero no soy muy bueno con javascript como para aplicar esas funciones.
	
	Una ayuda que no modifique mucho la estructura de el codigo?
-->
<script>
function slctr(texto,valor){
	this.texto = texto
	this.valor = valor
}
var a=new Array()
	a[0] = new slctr('- - - Seleccione una opcion - - -')
	a[1] = new slctr("Primera Opcion de A",'a1')

var b=new Array()
	b[0] = new slctr('- - - Seleccione una opcion - - -')
	b[1] = new slctr("Primera Opcion de B",'b1')
	
var c=new Array()
	c[0] = new slctr('- - - Seleccione una opcion - - -')
	c[1] = new slctr("Primera Opcion de C",'c1')

//-

var a1 = new Array()
	a1[0] = new slctr('- - Seleccione ultima opcion - -')
	a1[1] = new slctr("Opcion a1 = a1 (1)" ,null)
	a1[2] = new slctr("Opcion a1 = a1 (2)" ,null)

var b1 = new Array(0,1,2)
	b1[0] = new slctr('- - Seleccione ultima opcion - -')
	b1[3] = new slctr("Opcion b1 = b1 (1)" ,null)
	b1[4] = new slctr("Opcion b1 = b1 (2)" ,null)

var c1 = new Array(0,1,2,3)
	c1[0] = new slctr('- - Seleccione ultima opcion - -')
	c1[5] = new slctr("Opcion c1 = c1 (3)",null)
	c1[4] = new slctr("Opcion c1 = b1 (2)" ,null)
	c1[1] = new slctr("Opcion c1 = a1 (1)" ,null)
	
//-

function slctryole(cual,donde){
	if(cual.selectedIndex != 0){
		donde.length=0
		cual = eval(cual.value)
		for(m=0;m<cual.length;m++){
			var nuevaOpcion = new Option(cual[m].texto);
			donde.options[m] = nuevaOpcion;
			if(cual[m].valor != null){
				donde.options[m].value = cual[m].valor
			}
			else{
				donde.options[m].value = cual[m].texto
			}
		}
	}
}

//--------------------------
// Funcion ocultar y mostrar div

if (window.addEventListener)
window.addEventListener("load", expande, false)
else if (window.attachEvent)
window.attachEvent("onload", expande)

function contractall(){
	if (document.getElementById){
		var inc=0
		while (document.getElementById("opcion"+inc)){
		document.getElementById("opcion"+inc).style.display="none"
		inc++
		}
	}
}

//-

function expande(){
	if (document.getElementById){
		var selectedItem=document.areabox.select3.selectedIndex
		contractall()
		document.getElementById("opcion"+selectedItem).style.display="block"
	}
}
</script>

<title>Demo de la pagina</title>
</head>
<body>

<form name="areabox">
        <select name="select" onchange="contractall();slctryole(this,this.form.select2)">
            <option>- - - Seleccione su primera opcion - - -</option>
            <option value="a">Opcion A</option>
            <option value="b">Opcion B</option>
            <option value="c">Opcion C</option>
        </select>
        <select name="select2" onchange="contractall();slctryole(this,this.form.select3)">
            <option>- - - - - -</option>
        </select>
        <select name="select3" onchange="expande()">
            <option>- - - - - -</option>
        </select>
</form>
    
<div id="opcion0" class="divcontenedor">
</div>

<div id="opcion1" class="divcontenedor">
<h1>Opcion A1 (1)</h1>
<p>En la practica este div se comparte con C1, en la lista sera "funcional", pero te encontraras con un vacio.</p>
</div>

<div id="opcion2" class="divcontenedor">
<h1>Opcion A1 (2)</h1>
<p>¿Hasta aqui va chulo verdad?</p>
</div>

<div id="opcion3" class="divcontenedor">
<h1>Opcion B1 (1)</h1>
<p>Habras notado un hueco en la lista.</p>
</div>

<div id="opcion4" class="divcontenedor">
<h1>Opcion B1 (2)</h1>
<p>En la practica funciones de este div se comparten con la opcion C1</p>
</div>

<div id="opcion5" class="divcontenedor">
<h1>Opcion C1 (3)</h1>
</div>

</body>
</html>

Como veran el codigo parece estar de una forma muy mala, pero me es practico, el unico problema y lo que quiero solucionar es ese espacio en blanco que se genera en las listas dependientes, sin tener que agregar mas divs.

Ya intente algunas soluciones (como lo puse en el comentario del codigo) pero como soy novato con JS no logre mi cometido, alguien me pudiera dar una mano con esto? necesito echar a andar ya estas listas sin que se vean esos espacios vacios.

marcopoloaz06 · #2 (**permalink**) 16/07/2009, 00:10

Hola, ps que onda con tu nombre y ps creo que te falta poner mas info porque yo no te entiendo, que hace esa funcion o que??, perdón pero no la conosco :s
pero una arreglo facil ps no te los saltes y ya
saludos
;]

tampon · #3 (**permalink**) 16/07/2009, 06:13

que onda marco, pues mira se trata de una array, y mi pregunta es como lograr un array anidado usando estab base, y en cuanto a mi nombre, asi me llamo y ya saludos.

marcopoloaz06 · #4 (**permalink**) 16/07/2009, 08:30

ps noc como sea tu funcion pero ps no se la razón para que te tengas que saltar números, no lo veo necesario y en tu funcion si no quieres que muestre los vacios puedes poner un condicional que compruebe que hay algo en el array:

js:

Código javascript:

Ver originalif (a[1] != undefined){
    //codigo
}

saludoss de nuevo
:]

tampon · #5 (**permalink**) 16/07/2009, 09:56

Hola

gracias por tu respuesta, lo intente pero no creo haberlo echo bien por que no me funciono.

Y bueno para este caso si necesito el saltar numeros ¿por que? por que carga divs ocultos y que contienen diferente informacion, osea, los primeros numeros la informacion es constante hay alguna informacion en ellos que cambio dinamicamente (pero no toda) y en los numeros posteriosres al 8 si cambia toda.

por eso necesitaria saltar los numero, abia pensado que tal vez con arreglos anidados, pero en realidad no se bien la sintaxis.

salu2

tampon · #6 (**permalink**) 16/07/2009, 13:49

aun no puedo arreglar mi problema, por mas que intento, aluien me puede dar una amano con esto?

marcopoloaz06 · #7 (**permalink**) 16/07/2009, 14:12

hola, ps porque no pones la funcion slctr aver que se puede hacer
:]

tampon · #8 (**permalink**) 16/07/2009, 14:16

oye una disculpa, jaja me agarraste distraido con unas funciones de validacion y en verdad no entendi, como es que dices que va ??

tampon · #9 (**permalink**) 16/07/2009, 20:57

mm o que si esta como imposible este asunto?

tampon · #10 (**permalink**) 17/07/2009, 16:22

Ahora si ya cambie un poco la pregunta para que se entienda mejor y agregue el codigo, haber quien me echa la mano con eso?

marcopoloaz06 · #11 (**permalink**) 18/07/2009, 08:04

Hola, asi es más fácil, ps aver cambia esta función:

js:

Código javascript:

Ver originalfunction slctryole(cual, donde) {
    if (cual.selectedIndex != 0) {
        donde.length = 0;
        cual = eval(cual.value);
        for (m = 0, m_ = m; m < cual.length; m++) {
            var nuevaOpcion = new Option(cual[m].texto);
            donde.options[m_] = nuevaOpcion;
            if (cual[m].valor != null) {
                donde.options[m_].value = cual[m].valor;
            }
            else {
                donde.options[m_].value = cual[m].texto;
            }
            !isNaN(cual[m]) ? m_ : m_++;
        }
    }
};

aún asi sigo sin entender porque te saltas números en el array
saludoss
:]

tampon · #12 (**permalink**) 18/07/2009, 15:19

Ok lo probare y comento

tampon · #13 (**permalink**) 18/07/2009, 15:47

Perfecto home, muy bien! ahi cuando valla al estado te invito una chela!

tampon · #14 (**permalink**) 20/07/2009, 08:00

Huy bueno ya viendo bien el ejemplo creo que hay un fallo que no reconoci el otro dia por salir a las carreras.

cuando entras en la opcion C y en la lista escojes a una opcion: b1 (2) por decir alguna, te manda a el segundo div (opcion a1 (2)) conforme al html y no a la opcion seleccionada, como puedo arreglar eso?

marcopoloaz06 · #15 (**permalink**) 20/07/2009, 23:12

Hola, comento que porfin entiendo porque te saltas números en el Array y te digo que no tiene nada que ver con lo que deseas osea con el selectedIndex del select:

js:

Código javascript:

Ver originalvar a1 = new Array()
    a1[0] = new slctr('- - Seleccione ultima opcion - -') //selectedIndex = 0
    a1[1] = new slctr("Opcion a1 = a1 (1)" ,null)//selectedIndex = 1
    a1[2] = new slctr("Opcion a1 = a1 (2)" ,null)//selectedIndex = 2
 
var b1 = new Array(0,1,2)
    b1[0] = new slctr('- - Seleccione ultima opcion - -')//selectedIndex = 0
    b1[3] = new slctr("Opcion b1 = b1 (1)" ,null)//selectedIndex = 1
    b1[4] = new slctr("Opcion b1 = b1 (2)" ,null)//selectedIndex = 2
 
var c1 = new Array(0,1,2,3,4,5,6,7,8,9,10)
    c1[0] = new slctr('- - Seleccione ultima opcion - -')//selectedIndex = 0
    c1[1] = new slctr("Opcion c1 = a1 (1)" ,null)//selectedIndex = 1
    c1[4] = new slctr("Opcion c1 = b1 (2)" ,null)//selectedIndex = 2
    c1[10] = new slctr("Opcion c1 = c1 (3)",null)//selectedIndex = 3

Aunque el c1[10] este en la posición 10 del array, en el select su index va a ser: 3

Espero que ya comprendas, con razón no entendia porque los saltos.
saludoss
:]

tampon · #16 (**permalink**) 21/07/2009, 08:34

Que onda de nuevo, gracias por tus respuestas.
eh probado el codigo, pero aun me manda a los primeros divs del html (opcion1, opcion2 y opcion3) lo que eh intentado es saltarme opcion1 (por ejemplo) en el html y en el indice del arreglo, incluso intente delete(1); y splice(1); al final del arreglo y si me quita los indices y no aparece ese campo bacio en el listbox pero aun asi, cuando doy clic en la primera opcion (recurda que ya borre la primera opcion con splice o delete) y esperando que no me mande a opcion1 del html, (por que ya no tiene el indice [1]) aun asi me manda a opcion1.
es que no solo intento saltarme indices en el arreglo, sino tambien divs en el html.
hasta estoy empesando a dudar de que se pueda realizar esa accion con javascript.

saludos y gracias!