javascript solo funciona en IE8

nelson12345 · #1 (**permalink**) 16/06/2012, 08:54

Hola amigos, tengo un código en javascript, son unos select dependientes de dos niveles pero para mi aplicación uso diez o mas pares de estos select en la misma pagina. Bueno el problema esta en que solo funcionan en Internet explorer 8, no en google crome o Mozilla Firefox, puede que funcione el primer par pero de ahí en adelante ya no funcionan los de mas. Por el contrario en IE8 funcionan todos sin ningún problema. Dejo el código para que lo comprueben:

Código:

<form name="select" method="post">

    <select name="documento1" id="or" onchange="Combos1(this)">
    <option value=" "></option> 
    <option value="No">No</option>
    <option value="Si">Si</option>
    <option value="N/A">N/A</option> 
    </select>
    <label for="documento11"></label>
    
    <select name="documento11" id="documento11" style="visibility:text"> </select>
    <script language="javascript">
    function Combos1(x) {
    ItDepend=document.getElementById('documento11');
    if(!ItDepend){return;} 
    var mitems=new Array();
    mitems['Si']=['Si'];  
    mitems['No']=['No'];
    mitems['N/A']=['N/A'];
    ItDepend.options.length=0;  ItActual=mitems[x.options[x.selectedIndex].value];
    if(!ItActual){return;}  ItDepend.options.length=ItActual.length; 
    for(var i=0;i<ItActual.length;i++) {
	ItDepend.options[i].text=ItActual[i];   
	ItDepend.options[i].value=ItActual[i];  }}
	</script>
<br>
    <select name="documento2" id="or" onchange="Combos2(this)">
    <option value=" "></option> 
    <option value="No">No</option>
    <option value="Si">Si</option> 
    <option value="N/A">N/A</option>
    </select>
    <label for="documento22"></label>    	

    <select name="documento22" id="documento2" style="visibility:text" > </select>
    <script language="javascript">
    function Combos2(x) {
    ItDepend=document.getElementById('documento22');
    if(!ItDepend){return;} 
    var mitems=new Array();
    mitems['Si']=['Si'];  
    mitems['No']=['No'];
    mitems['N/A']=['N/A'];
    ItDepend.options.length=0;  ItActual=mitems[x.options[x.selectedIndex].value];
    if(!ItActual){return;}  ItDepend.options.length=ItActual.length; 
    for(var i=0;i<ItActual.length;i++) {
	ItDepend.options[i].text=ItActual[i];   
	ItDepend.options[i].value=ItActual[i];  }}
	</script>
<br>
<select name="documento3" id="or" onchange="Combos3(this)">
    <option value=" "></option> 
    <option value="No">No</option>
    <option value="Si">Si</option> 
    <option value="N/A">N/A</option>
    </select></td><td>
    <label for="documento33"></label>
    
    <select name="documento33" id="documento3" style="visibility:text" > </select>
    <script language="javascript">
    function Combos3(x) {
    ItDepend=document.getElementById('documento33');
    if(!ItDepend){return;} 
    var mitems=new Array();
    mitems['Si']=['Si'];  
    mitems['No']=['No'];
    mitems['N/A']=['N/A'];
    ItDepend.options.length=0;  ItActual=mitems[x.options[x.selectedIndex].value];
    if(!ItActual){return;}  ItDepend.options.length=ItActual.length; 
    for(var i=0;i<ItActual.length;i++) {
	ItDepend.options[i].text=ItActual[i];   
	ItDepend.options[i].value=ItActual[i];  }}
	</script>
    

</form>

furoya · #2 (**permalink**) 16/06/2012, 19:19

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
</head>
<body>
<form name="select" method="post">

    <select name="documento1" id="or1" onchange="Combos1(this)">
    <option value=" "></option> 
    <option value="No">No</option>
    <option value="Si">Si</option>
    <option value="N/A">N/A</option> 
    </select>
    <label for="documento11"></label>
    
    <select name="documento11" id="documento11" style="visibility:visible"> </select>
    <script type="text/javascript">
    function Combos1(x) {
    ItDepend=document.getElementById('documento11');
    if(!ItDepend){return;} 
    var mitems=new Array();
    mitems['Si']=['Si'];  
    mitems['No']=['No'];
    mitems['N/A']=['N/A'];
    ItDepend.options.length=0;  ItActual=mitems[x.options[x.selectedIndex].value];
    if(!ItActual){return;}  ItDepend.options.length=ItActual.length; 
    for(var i=0;i<ItActual.length;i++) {
	ItDepend.options[i].text=ItActual[i];   
	ItDepend.options[i].value=ItActual[i];  }}
	</script>
<br>
    <select name="documento2" id="or2" onchange="Combos2(this)">
    <option value=" "></option> 
    <option value="No">No</option>
    <option value="Si">Si</option>
    <option value="N/A">N/A</option> 
    </select>
    <label for="documento11"></label>
    
    <select name="documento22" id="documento22" style="visibility:visible"> </select>
    <script type="text/javascript">
    function Combos2(x) {
    ItDepend=document.getElementById('documento22');
    if(!ItDepend){return;} 
    var mitems=new Array();
    mitems['Si']=['Si'];  
    mitems['No']=['No'];
    mitems['N/A']=['N/A'];
    ItDepend.options.length=0;  ItActual=mitems[x.options[x.selectedIndex].value];
    if(!ItActual){return;}  ItDepend.options.length=ItActual.length; 
    for(var i=0;i<ItActual.length;i++) {
	ItDepend.options[i].text=ItActual[i];   
	ItDepend.options[i].value=ItActual[i];  }}
	</script>
<br>
    <select name="documento3" id="or3" onchange="Combos3(this)">
    <option value=" "></option> 
    <option value="No">No</option>
    <option value="Si">Si</option>
    <option value="N/A">N/A</option> 
    </select>
    <label for="documento11"></label>
    
    <select name="documento33" id="documento33" style="visibility:visible"> </select>
    <script type="text/javascript">
    function Combos3(x) {
    ItDepend=document.getElementById('documento33');
    if(!ItDepend){return;} 
    var mitems=new Array();
    mitems['Si']=['Si'];  
    mitems['No']=['No'];
    mitems['N/A']=['N/A'];
    ItDepend.options.length=0;  ItActual=mitems[x.options[x.selectedIndex].value];
    if(!ItActual){return;}  ItDepend.options.length=ItActual.length; 
    for(var i=0;i<ItActual.length;i++) {
	ItDepend.options[i].text=ItActual[i];   
	ItDepend.options[i].value=ItActual[i];  }}
	</script>

</form>
</body>
</html>

¿Y por qué no usas un solo escript para los tres, preferentemente en el head ?

nelson12345 · #3 (**permalink**) 18/06/2012, 09:19

gracias amigo podrias explicarme un poco mas lo que me sugeriste. ¿acaso utilizandolo en el head me funcionara para todos los navegadores?

fjrueda · #4 (**permalink**) 18/06/2012, 11:55

nelson12345

la cuestion es que por norma y buenas practicas los codigo JS tienen que estar en la etiqueta "head" en especial cuando son funciones, claro yo puedo usar JS en todo el documento, siempre y cuando no interfiera con la fluides de las etiquetas HTML.

Ahora ... usted esta llamando 3 bcs la misma funcion solo que otros nombre, mejor haga la funcion una vez y le cambia solo el identificador por parametro.

Si esta claro o necesita mas ayuda ??

emprear · #5 (**permalink**) 18/06/2012, 12:36

Cita:

Iniciado por nelson12345

gracias amigo podrias explicarme un poco mas lo que me sugeriste. ¿acaso utilizandolo en el head me funcionara para todos los navegadores?

@nelson12345
Esa script no debería funcionar en ninguna parte, me gustaría ver algún ejemplo que funcione como lo señalas, en IE8

@furoya te la ha corregido para qe funcione, lo cual no invalida mi anterior observación

Ejemplo
ItDepend=document.getElementById('documento22');
pero no hay elemento con documento22 por id
...

id="or" --> repetido

ya que estamos
style="visibility:text" --> no existe (hidden, visible, collapse, inherit son los valores posibles)

saludos

furoya · #6 (**permalink**) 18/06/2012, 16:17

Cita:

Iniciado por nelson12345

gracias amigo podrias explicarme un poco mas lo que me sugeriste. ¿acaso utilizandolo en el head me funcionara para todos los navegadores?

No sé si fue sugerencia. Más bien fue una duda, por lo extraño de tu código. Es evidente que no está completo, y que pusiste la parte que no te andaba para que la viésemos. Quizá el resto del documento justificara tres veces la misma función, cada una debajo de su selector.
Supongo que no preguntas por la causa de la falla, porque ya te diste cuanta al comparar. De cualquier forma, gracias por disimular el error que cometí al volver a poner las label (copié una, y olvidé cambiarles el for= al pegarlas).

Es realmente curioso que preguntes cosas elementales de JS, si ya anduviste trabajando sobre ese escript. Como dice fjrueda, si ya estás apuntando al select que hace el cambio con un "this", la función puede servir para cualquiera, solamente tienes que ocuparte de que el selector dependiente esté en una misma "caja" o —mejor— que tenga el mismo identificador, pero agregando una letra o número al final. Entonces hay un "truco" para apuntarle aprovechando el id de lo que tiene el onchange.

Cita:

Iniciado por fjrueda

... 3 bcs ...

‼‽.
¿Estás posteando desde el teléfono y se te pegó el SMSado?
La única vez que usé algo así en un foro fue aquí, en los MV, porque me pusieron un límite de caracteres que no me alcanzaba para dejar mi mensaje.

Cita:

Iniciado por emprear

Esa script no debería funcionar en ninguna parte...

Más bien!. Era un desastre. Pero supuse que el original era el que no andaba fuera de IE8; esto que posteó es una versión reducida (que le quedó mal; si se lo arreglé fue para premiar la voluntad, porque puso más que la mayoría de los que vienen entrando por acá).

nelson12345 · #7 (**permalink**) 18/06/2012, 21:46

gracias a todos por sus repuestas. quiero mostrarles algo parecido a lo que me pasa. miren por favor el ejemplo de un select dependiente de dos niveles en este link:
http://www.webtaller.com/construccio...javascript.php

Podran darse cuente que el script funciona para el navegador Internet Explorer 8 y para Google chrome pero para Mozilla Firefox no funciona. ¿esto a que se debe?

Cita:

Estoy utilizando Mozilla Firefox 13.0 ¿depronto sea la version?

emprear · #8 (**permalink**) 19/06/2012, 00:40

Firefox no puede acceder al elemento del form con
formulario.meses.length
porque interpreta 'formulario' como una variable
necesitás la forma completa
document.forms.formulario.meses.length

SAludos

fjrueda · #9 (**permalink**) 19/06/2012, 06:26

nelson12345

En el link que usted nos muestra le estan indicando lo mismo que nosotros, una funcion para el manejo del objeto "select", es claro que usted es nuevo en esto y trato de acoplar un codigo, por tanto, si puede y si quiere, postee el codigo completo y de una buena manera se le puede ayudar a solucionar la cuestion.

Por ejemplo, usted esta llamando la funcion "Combos1" en la linea 3, pero la esta creando en la linea 15, IE por no seguir acorde una norma de los estandares "W3C" se lo valida, pero los otros exploradores no .... eso es una pelea dura de entener cuando apenas se comienza y toca leer y realizar "prueba y error", pero se puede mejorar.

furoya · #10 (**permalink**) 19/06/2012, 07:49

No puedo creer que no haya un ejemplo de estos en el Foro. ¿Para qué ir a estos sitios truchos que publican cualquier cosa, si después terminan acá preguntando por qué no funcionan?
¡O peor, pretendiendo que se los arreglemos!

Encima debe ser viejísimo, y nadie lo actualiza (dice 2011, pero <script language="JavaScript"> ya no se usaba desde mucho antes).

Para colmo no es algo que nos sirva para estudiar ahora, porque hablamos de una sola función para varios eventos puestos en cada caso, y resulta que el autor metió cuatro function trimestre() en vez de usar la misma cambiando los valores por variable, o desde un array (yo prefiero esto último, pero va en gustos).

Espero que puedas poner algún ejemplo potable de lo que estás haciendo, nelson12345. Sería una buena oportunidad de mostrar lo de la función única y lo de apuntar a los segundos select con un dato del primero.