Foros del Web » Programando para Internet » Javascript »

problema con bucle for

Estas en el tema de problema con bucle for en el foro de Javascript en Foros del Web. Hola, soy nuevo en el foro y este es mi primer post, lo que sucede es que estoy trabajando con un select que es dependiente ...
  #1 (permalink)  
Antiguo 22/06/2011, 14:18
 
Fecha de Ingreso: junio-2011
Ubicación: Medellin-Antioquia-Colombia
Mensajes: 13
Antigüedad: 12 años, 9 meses
Puntos: 1
Pregunta problema con bucle for

Hola, soy nuevo en el foro y este es mi primer post, lo que sucede es que estoy trabajando con un select que es dependiente de otro. intento que cuando en el primer select se elija un item, me cargue desde la bd n numero de options al segundo select, y cuando se elija el index 0 del primer select, todos los options del segundo se me vuelvan null. para eso intente de la siguiente manera


Código Javascript:
Ver original
  1. var t=document.forms.listas.region.length
  2.                 //window.alert("el numero de items en la lista region es de: "+ t);
  3.                 t=parseInt(t);
  4.                 for(i=1; i<=t; i+1){
  5.                    
  6.                     //window.alert("se eliminara el item: "+document.forms.listas.region.options[i].value)
  7.                     document.forms.listas.region.options[i]=null;
  8.                     window.alert("el numero de items en la lista region es de: "+ t);
  9.                     //window.alert("se ha eliminado el item numero "+i)
  10.                 }
  11.                 opcion0=new option("0","Selecione...");
  12.                 document.forms.listas.region.options[0]=opcion0;
  13.                 //document.forms.listas.region.options[2]=null;


el codigo asi tal cual esta me funciona, pero hay dos incovenientes:
·si uso "i++" pare el incremento no me toma de 1 en 1 sino de 2 en 2.
·si quito alguno de los o comento todos los "window.alert" dentro del for se me vuelve un ciclo infinito.

gracias de antemano por la ayuda que me puedan prestar

Última edición por Gabriel_Bazeth; 22/06/2011 a las 14:44
  #2 (permalink)  
Antiguo 22/06/2011, 22:38
Avatar de Danielfuzz  
Fecha de Ingreso: septiembre-2007
Mensajes: 111
Antigüedad: 16 años, 6 meses
Puntos: 18
Respuesta: problema con bucle for

Hola Garbriel_Bazeth:

Para empezar cambia tu

for(i=1; i<=t; i+1)

por

for(i=1; i<=t; i++)

el código que tienes actualmente hace que tu variable i no se incremente nunca, porq?? pues lo unico que estás haciendo es sumar 1 al valor que tiene i, pero ese valor no lo estás guardando en la variable, simplemente estas haciendo una suma "al aire".

Te sugiero que pegues tu html del form para solucionar mas facilmente el problema.

Saludos.
  #3 (permalink)  
Antiguo 23/06/2011, 06:59
 
Fecha de Ingreso: junio-2011
Ubicación: Medellin-Antioquia-Colombia
Mensajes: 13
Antigüedad: 12 años, 9 meses
Puntos: 1
Respuesta: problema con bucle for

Gracias por el dato Danielfuzz, aqui esta mi html:

Código HTML:
Ver original
  1. <form name="listas" method="post" action="">
  2.         <table id="tabla" border="3px">
  3.             <tr>
  4.                 <td><strong>Elija una subregion</strong>
  5.                     <select name="subregion" onchange="def_subr()">
  6.                             <option value="0">Seleccione...</option>
  7.                         <%
  8.                            //organizamos la consulta
  9.                            String[][] subregiones;
  10.                            //la ejecutamos
  11.                            guardar bd=new guardar();
  12.                            subregiones=bd.Consultar_modificado("SELECT subregion.idSubregion, subregion.nombre  FROM subregion", 2);
  13.  
  14.                            //relleno la lista
  15.                            for(int i=0; i < subregiones.length;i++){
  16.                              
  17.                        %>
  18.                             <option value="<%=subregiones[i][0]%>"><%=subregiones[i][1]%></option>
  19.                         <%
  20.                                }
  21.                          
  22.                        %>
  23.                     </select>
  24.                 </td>
  25.             </tr>
  26.             <tr>
  27.                 <td>
  28.                     <strong>Elija una region</strong>
  29.                     <select name="region">
  30.                         <option value="seleccione">Seleccione...</option>
  31.                     </select>
  32.                 </td>
  33.             </tr>
  34.         </table>
  35.                 </form>

el select de nombre subregion es el select del cual depende el select region, el select region es el que intento limpiar cuando en el select subregion se elige el index 0.
  #4 (permalink)  
Antiguo 25/06/2011, 19:22
Avatar de Danielfuzz  
Fecha de Ingreso: septiembre-2007
Mensajes: 111
Antigüedad: 16 años, 6 meses
Puntos: 18
Respuesta: problema con bucle for

Gabriel_Bazeth, disculpa la tardanza de la respuesta, revisé tu html, pero me pegaste el html de tu proyecto, yo me refería al html final que sale "impreso" en el explorador.

Algunas sugerencias que te doy para resolver tu problema: cada uno de tus selects podrian tener un option que indique que no se está seleccionando nada. por ejemplo

<option value='0' label='seleccione un elemento'>seleccione un elemento</option>

y cada vez que en el select "padre" se seleccione esta opción, en lugar de poner todos los options del select "hijo" en null, podrias seleccionar este "option" que indica que no existe seleccion, y ademas bloquearlo.

te ayudo un poco con el código:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<script type="text/javascript">

function actualizar(obj)
{
	var valor = obj.value;
	var hijo =  document.getElementById('hijo');
	if(valor=="0")
		hijo.disabled=true;
	else
	{
		hijo.disabled=false;
		alert("acá se carga el select hijo");
	}
}

</script>
</head>

<body>
	<form name="listas" method="post" action="">
    padre:
    	<select name="padre" id="padre" onchange="actualizar(this)">
        	<option value="0" label="seleccione">seleccione</option>
            <option value="1" label="opción 1">opción 1</option>
            <option value="1" label="opción 1">opción 1</option>
        </select><br />
        hijo:
        <select name="hijo" id="hijo">
        	<option value="0" label="seleccione">seleccione</option>
            <option value="1" label="opción 1">opción 1</option>
            <option value="1" label="opción 1">opción 1</option>
        </select>
    </form>
</body>
</html> 
hasta aquí estaría lo de activar/desactivar el select hijo, si tienes problemas con quitar/anadir nuevos options a los selects lo posteas, saludos.

Saludos
  #5 (permalink)  
Antiguo 30/06/2011, 09:38
 
Fecha de Ingreso: junio-2011
Ubicación: Medellin-Antioquia-Colombia
Mensajes: 13
Antigüedad: 12 años, 9 meses
Puntos: 1
Respuesta: problema con bucle for

Graicas DanielFuzz, tu codigo me funciono, pero al intentar aplicar a lo que nececito no me funciona, mira aqui esta la adaptacion que le hice.

Código Javascript:
Ver original
  1. <html>
  2.     <head>
  3.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.         <title>Plataforma Administrativa: Prueba Semaforo</title>
  5.         <script type="text/javascript" src="js/jquery-1.6.1.js"></script>
  6.         <link rel="stylesheet" href="Css/styleformSemaforo.css" type="text/css">
  7.         <script language="JavaScript" type="text/JavaScript">
  8.  
  9.        
  10.             function def_subr(obj){
  11.                 var selsubr=obj.value;
  12.                 if(selsubr==0) asig_reg0(document.getElementById('subregion'));
  13.                 if(selsubr==1) asig_reg1();
  14.                 if(selsubr==2) asig_reg2();
  15.                 if(selsubr==3) asig_reg3();
  16.                 if(selsubr==4) asig_reg4();
  17.                 if(selsubr==5) asig_reg5();
  18.                 if(selsubr==6) asig_reg6();
  19.                 if(selsubr==7) asig_reg7();
  20.                 if(selsubr==8) asig_reg8();
  21.                 if(selsubr==9) asig_reg9();
  22.  
  23.             }
  24.             function asig_reg0(obj){
  25.  
  26.                var valor = obj.value;
  27.                var lista = document.getElementById('region');
  28.                if(valor=="0")
  29.                    lista.disabled=true;
  30.                else{
  31.                    lista.disabled=false;
  32.                }
  33.             }
  34.  
  35.             function asig_reg1(){
  36.                
  37.  
  38.                 opcion0=new Option("prueba","prueba");
  39.                 opcion1=new Option("prueba2", "prueba2");
  40.                 opcion3=new Option("prueba3", "prueba3");
  41.                 opcion4=new Option("prueba4", "prueba4");
  42.                 opcion5=new Option("prueba5", "prueba5");
  43.                 opcion6=new Option("prueba6", "prueba6");
  44.                 document.forms.listas.region.options[1]=opcion0;
  45.                 document.forms.listas.region.options[2]=opcion1;
  46.                  document.forms.listas.region.options[3]=opcion3;
  47.                 document.forms.listas.region.options[4]=opcion4;
  48.                  document.forms.listas.region.options[5]=opcion5;
  49.                 document.forms.listas.region.options[6]=opcion6;
  50.                
  51.             }
  52.  
  53.             function asig_reg2(){
  54.                 opcion0=new Option("prueba3","prueba3");
  55.                 opcion1=new Option("prueba4", "prueba4");
  56.                 document.forms.listas.region.options[1]=opcion0;
  57.                 document.forms.listas.region.options[2]=opcion1;
  58.             }
  59.  
  60.             function asig_reg3(){
  61.                 opcion0=new Option("prueba5","prueba5");
  62.                 opcion1=new Option("prueba6", "prueba6");
  63.                 document.forms.listas.region.options[1]=opcion0;
  64.                 document.forms.listas.region.options[2]=opcion1;
  65.             }
  66.  
  67.             function asig_reg4(){
  68.                 opcion0=new Option("prueba7","prueba7");
  69.                 opcion1=new Option("prueba8", "prueba8");
  70.                 document.forms.listas.region.options[1]=opcion0;
  71.                 document.forms.listas.region.options[2]=opcion1;
  72.             }
  73.  
  74.             function asig_reg5(){
  75.                 opcion0=new Option("prueba9","prueba9");
  76.                 opcion1=new Option("prueba10", "prueba10");
  77.                 document.forms.listas.region.options[1]=opcion0;
  78.                 document.forms.listas.region.options[2]=opcion1;
  79.             }
  80.         </script>
  81.     </head>
  82.     <body>
  83.         <div id="menu">
  84.  
  85.  
  86. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  87.    "http://www.w3.org/TR/html4/loose.dtd">
  88.  
  89. <html>
  90.     <head>
  91.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  92.         <link rel="stylesheet" href="Css/menu.css" type="text/css">
  93.         <title>JSP Page</title>
  94.     </head>
  95.     <body>
  96.        <ul id="navmenu-v">
  97.                 <li><a href="newjsp.jsp">Inicio</a></li>
  98.                 <li><a href="#">Informacion Municipio</a></li>
  99.                 <li><a href="#">Revision de datos</a>
  100.                     <ul>
  101.                         <li><a href="formSemaforo.jsp">Prueba Semaforo</a></li>
  102.                         <li><a href="#">Prueba Stepwise</a></li>
  103.                     </ul>
  104.                 </li>
  105.                 <li><a href="#">Instituciones Educativas</a></li>
  106.                 <li><a href="#">Hospitales</a></li>
  107.                 <li><a href="#">Alianzas</a></li>
  108.                 <li><a href="index.jsp">Salir</a></li>
  109.                 <li><a href="test_ld1.jsp">prueba</a></li>
  110.             </ul>
  111.     </body>
  112. </html>
  113. </div>
  114.         <div id="centro"><center>
  115.                 <form name="listas" method="post" action="">
  116.         <table id="tabla" border="3px">
  117.             <tr>
  118.                 <td><strong>Elija una subregion</strong>
  119.                     <select name="subregion" onchange="def_subr(this)">
  120.                             <option value="0">Seleccione...</option>
  121.                             <option value="1">Valle de aburra</option>
  122.                             <option value="2">Oriente</option>
  123.                             <option value="3">Suroeste</option>
  124.                             <option value="4">Occidente</option>
  125.                             <option value="5">Norte</option>
  126.                             <option value="6">Nordeste</option>
  127.                             <option value="7">Magdalena medio</option>
  128.                             <option value="8">Uraba</option>
  129.                             <option value="9">Bajo cauca</option>
  130.                     </select>
  131.                 </td>
  132.             </tr>
  133.             <tr>
  134.                 <td>
  135.                     <strong>Elija una region</strong>
  136.                     <select name="region">
  137.                         <option value="seleccione">Seleccione...</option>
  138.                     </select>
  139.                 </td>
  140.             </tr>
  141.         </table>
  142.                 </form>
  143.  
  144.                     <img src="mar.png">
  145.             </center>
  146.  
  147.         </div>
  148.     </body>
  149. </html>

Agradecería mucho que me ayudases a descubrir en que fallo.
  #6 (permalink)  
Antiguo 10/07/2011, 21:37
Avatar de Danielfuzz  
Fecha de Ingreso: septiembre-2007
Mensajes: 111
Antigüedad: 16 años, 6 meses
Puntos: 18
Respuesta: problema con bucle for

Hola yefranjo77, el primer error que noté en tu código es que tienes varios <body></body> y <html></html>, talvez necesites estudiar un poco lo que es la estructura de un html.
segundo error, en tu función def_subr() llamas a otras funciones, algunas de ellas no implementadas (asig_reg8 y asig_reg9),
tercer error, envias como parametor a la funcion asig_reg0 un elemento que no existe, pues estás tratando de coger un elemento que tenga un id llamado "subregion" cosa que no hay, por eso le puse a tu select un id="subregion"
tmabien cometiste el mismo error con el select "region".

Parece que no tienes muy claro como usar lo getElementById(), te explico,
getElementById('idelemento') se usa para "coger" elementos que tengan el valor "idelemento" en su atributo id. Por ejemplo, si en tu html hay un <select id="idelemento"></select>, al hacer el getElementById('idelemento') se coge el select que tenga el id="idelemento".


te pego el HTML
Código HTML:
 <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Plataforma Administrativa: Prueba Semaforo</title>
            <script type="text/javascript" src="js/jquery-1.6.1.js"></script>
            <link rel="stylesheet" href="Css/styleformSemaforo.css" type="text/css">
            <script language="JavaScript" type="text/JavaScript">
     
           
                function def_subr(obj){
                    var selsubr=obj.value;
                    if(selsubr==0) asig_reg0(document.getElementById('subregion'));
                    if(selsubr==1) asig_reg1();
                    if(selsubr==2) asig_reg2();
                    if(selsubr==3) asig_reg3();
                    if(selsubr==4) asig_reg4();
                    if(selsubr==5) asig_reg5();
                    if(selsubr==6) asig_reg6();
                    if(selsubr==7) asig_reg7();
                    if(selsubr==8) asig_reg8();
                    if(selsubr==9) asig_reg9();
					return;
     
                }
                function asig_reg0(obj){
     
                   var valor = obj.value;
                   var lista = document.getElementById('region');
                   if(valor=="0")
                       lista.disabled=true;
                   else{
                       lista.disabled=false;
                   }
                }
     
                function asig_reg1(){
                   
     
                    opcion0=new Option("prueba","prueba");
                    opcion1=new Option("prueba2", "prueba2");
                    opcion3=new Option("prueba3", "prueba3");
                    opcion4=new Option("prueba4", "prueba4");
                    opcion5=new Option("prueba5", "prueba5");
                    opcion6=new Option("prueba6", "prueba6");
                    document.forms.listas.region.options[1]=opcion0;
                    document.forms.listas.region.options[2]=opcion1;
                     document.forms.listas.region.options[3]=opcion3;
                    document.forms.listas.region.options[4]=opcion4;
                     document.forms.listas.region.options[5]=opcion5;
                    document.forms.listas.region.options[6]=opcion6;
                   
                }
     
                function asig_reg2(){
                    opcion0=new Option("prueba3","prueba3");
                    opcion1=new Option("prueba4", "prueba4");
                    document.forms.listas.region.options[1]=opcion0;
                    document.forms.listas.region.options[2]=opcion1;
                }
     
                function asig_reg3(){
                    opcion0=new Option("prueba5","prueba5");
                    opcion1=new Option("prueba6", "prueba6");
                    document.forms.listas.region.options[1]=opcion0;
                    document.forms.listas.region.options[2]=opcion1;
                }
     
                function asig_reg4(){
                    opcion0=new Option("prueba7","prueba7");
                    opcion1=new Option("prueba8", "prueba8");
                    document.forms.listas.region.options[1]=opcion0;
                    document.forms.listas.region.options[2]=opcion1;
                }
     
                function asig_reg5(){
                    opcion0=new Option("prueba9","prueba9");
                    opcion1=new Option("prueba10", "prueba10");
                    document.forms.listas.region.options[1]=opcion0;
                    document.forms.listas.region.options[2]=opcion1;
                }
				
				function asig_reg6(){}
				function asig_reg7(){}
				function asig_reg8(){}
				function asig_reg9(){}
            </script>
        </head>
        <body>
            <div id="menu">
     
     
   
           <ul id="navmenu-v">
                    <li><a href="newjsp.jsp">Inicio</a></li>
                    <li><a href="#">Informacion Municipio</a></li>
                    <li><a href="#">Revision de datos</a>
                        <ul>
                            <li><a href="formSemaforo.jsp">Prueba Semaforo</a></li>
                            <li><a href="#">Prueba Stepwise</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Instituciones Educativas</a></li>
                    <li><a href="#">Hospitales</a></li>
                    <li><a href="#">Alianzas</a></li>
                    <li><a href="index.jsp">Salir</a></li>
                    <li><a href="test_ld1.jsp">prueba</a></li>
                </ul>
                </div>
            <div id="centro"><center>
                    <form name="listas" method="post" action="">
            <table id="tabla" border="3px">
                <tr>
                    <td><strong>Elija una subregion</strong>
                        <select id="subregion" name="subregion" onchange="def_subr(this)">
                                <option value="0">Seleccione...</option>
                                <option value="1">Valle de aburra</option>
                                <option value="2">Oriente</option>
                                <option value="3">Suroeste</option>
                                <option value="4">Occidente</option>
                                <option value="5">Norte</option>
                                <option value="6">Nordeste</option>
                                <option value="7">Magdalena medio</option>
                                <option value="8">Uraba</option>
                                <option value="9">Bajo cauca</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <strong>Elija una region</strong>
                        <select id="region" name="region">
                            <option value="seleccione">Seleccione...</option>
                        </select>
                    </td>
                </tr>
            </table>
                    </form>
     
                        <img src="mar.png">
                </center>
     </div></body></html> 
También te pego un link a un sitio donde explica desde cero lo que es dhtml que algo que veo que necesitas reforzar.


http://www.dhtmlya.com.ar/

Saludos.

Etiquetas: bucle
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




La zona horaria es GMT -6. Ahora son las 03:10.