elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Sigue las noticias más importantes de seguridad informática en el Twitter! de elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  formulario select option con onchange		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: formulario select option con onchange  (Leído 3,608 veces)
jecavi20

Desconectado Desconectado

Mensajes: 20


Ver Perfil
formulario select option con onchange
« en: 14 Junio 2013, 20:55 pm »
buenas tardes soy un novato en codigos y estoy tratando de hacer un formulario de registro con varias preguntas pero tengo un problema, es que tengo 6 campos de select option con onchange y necesito unirlos que solo sean 3 y cuando seleccione una opcion cambien los demas opciones con su respectiva respuesta, me recomendaron esta pagina haber si me podrian ayudar, para que vean mejor les pongo el codigo que tengo:

<script language="javascript">

function addOpt(oCntrl, iPos, sTxt, sVal){
var selOpcion=new Option(sTxt, sVal);
eval(oCntrl.options[iPos]=selOpcion);
}

function cambia(obj,Cntrl){
var oCntrl=document.getElementById(Cntrl);
while (oCntrl.length!=0){
oCntrl.remove(0);
}
switch (obj.selectedIndex){
case 0:
addOpt(oCntrl, 0, "Letra", "0");
break;
case 1:
addOpt(oCntrl, 0, "Letra", "0");
addOpt(oCntrl, 1, "A", "1");
addOpt(oCntrl, 2, "B", "2");
addOpt(oCntrl, 3, "C", "3");
addOpt(oCntrl, 4, "D", "4");
addOpt(oCntrl, 5, "E", "5");
break;
case 2:
addOpt(oCntrl, 0, "Letra", "0");
addOpt(oCntrl, 1, "A", "1");
addOpt(oCntrl, 2, "B", "2");
addOpt(oCntrl, 3, "C", "3");
addOpt(oCntrl, 4, "D", "4");
addOpt(oCntrl, 5, "E", "5");
break;
}
}

</script>

<script language="javascript">

function cambia2(obj,Cntrl){
var oCntrl=document.getElementById(Cntrl);
while (oCntrl.length!=0){
oCntrl.remove(0);
}

switch (obj.selectedIndex){
case 0:
addOpt(oCntrl, 0, "Apto", "0");
break;
case 1:
addOpt(oCntrl, 0, "Apto", "0");
addOpt(oCntrl, 1, "Apto AA", "1");
addOpt(oCntrl, 2, "Apto 01", "2");
addOpt(oCntrl, 3, "Apto 10", "3");
addOpt(oCntrl, 4, "Apto 11", "4");
addOpt(oCntrl, 5, "Apto 20", "5");
addOpt(oCntrl, 6, "Apto 21", "6");
break;
case 2:
addOpt(oCntrl, 0, "Apto", "0");
addOpt(oCntrl, 1, "Apto 02", "1");
addOpt(oCntrl, 2, "Apto 03", "2");
addOpt(oCntrl, 3, "Apto 12", "3");
addOpt(oCntrl, 4, "Apto 13", "4");
addOpt(oCntrl, 5, "Apto 22", "5");
addOpt(oCntrl, 6, "Apto 23", "6");
break;
case 3:
addOpt(oCntrl, 0, "Apto", "0");
addOpt(oCntrl, 1, "Apto 04", "1");
addOpt(oCntrl, 2, "Apto 05", "2");
addOpt(oCntrl, 3, "Apto 14", "3");
addOpt(oCntrl, 4, "Apto 15", "4");
addOpt(oCntrl, 5, "Apto 24", "5");
addOpt(oCntrl, 6, "Apto 25", "6");
break;
case 4:
addOpt(oCntrl, 0, "Apto", "0");
addOpt(oCntrl, 1, "Apto 06", "1");
addOpt(oCntrl, 2, "Apto 07", "2");
addOpt(oCntrl, 3, "Apto 16", "3");
addOpt(oCntrl, 4, "Apto 17", "4");
addOpt(oCntrl, 5, "Apto 26", "5");
addOpt(oCntrl, 6, "Apto 27", "6");
break;
case 5:
addOpt(oCntrl, 0, "Apto", "0");
addOpt(oCntrl, 1, "Apto 08", "1");
addOpt(oCntrl, 2, "Apto 09", "2");
addOpt(oCntrl, 3, "Apto 18", "3");
addOpt(oCntrl, 4, "Apto 19", "4");
addOpt(oCntrl, 5, "Apto 28", "5");
addOpt(oCntrl, 6, "Apto 29", "6");
break;
}
}
</script>


<script language="javascript">

function cambia3(obj,Cntrl){
var oCntrl=document.getElementById(Cntrl);
while (oCntrl.length!=0){
oCntrl.remove(0);
}
switch (obj.selectedIndex){
case 0:
addOpt(oCntrl, 0, "Letra", "0");
break;
case 1:
addOpt(oCntrl, 0, "Letra", "0");
addOpt(oCntrl, 1, "A", "1");
addOpt(oCntrl, 2, "B", "2");
addOpt(oCntrl, 3, "C", "3");
addOpt(oCntrl, 4, "D", "4");
break;
case 2:
addOpt(oCntrl, 0, "Letra", "0");
addOpt(oCntrl, 1, "A", "1");
addOpt(oCntrl, 2, "B", "2");
addOpt(oCntrl, 3, "C", "3");
addOpt(oCntrl, 4, "D", "4");
break;
}
}
</script>

<script language="javascript">

function cambia4(obj,Cntrl){
var oCntrl=document.getElementById(Cntrl);
while (oCntrl.length!=0){
oCntrl.remove(0);
}

switch (obj.selectedIndex){
case 0:
addOpt(oCntrl, 0, "Apto", "0");
break;
case 1:
addOpt(oCntrl, 0, "Apto", "0");
addOpt(oCntrl, 1, "A1", "1");
addOpt(oCntrl, 2, "A2 ", "2");
addOpt(oCntrl, 3, "A3", "3");
addOpt(oCntrl, 4, "A4", "4");
addOpt(oCntrl, 5, "A5 ", "5");
addOpt(oCntrl, 6, "A6", "6");
break;
case 2:
addOpt(oCntrl, 0, "Apto", "0");
addOpt(oCntrl, 1, "B1 ", "1");
addOpt(oCntrl, 2, "B2", "2");
addOpt(oCntrl, 3, "B3", "3");
addOpt(oCntrl, 4, "B4 ", "4");
addOpt(oCntrl, 5, "B5", "5");
addOpt(oCntrl, 6, "B6", "6");
break;
case 3:
addOpt(oCntrl, 0, "Apto", "0");
addOpt(oCntrl, 1, "C1 ", "1");
addOpt(oCntrl, 2, "C2", "2");
addOpt(oCntrl, 3, "C3", "3");
addOpt(oCntrl, 4, "C4 ", "4");
addOpt(oCntrl, 5, "C5", "5");
addOpt(oCntrl, 6, "C6", "6");
break;
case 4:
addOpt(oCntrl, 0, "Apto", "0");
addOpt(oCntrl, 1, "D1 ", "1");
addOpt(oCntrl, 2, "D2", "2");
addOpt(oCntrl, 3, "D3", "3");
addOpt(oCntrl, 4, "D4 ", "4");
addOpt(oCntrl, 5, "D5", "5");
addOpt(oCntrl, 6, "D6", "6");
break;
}
}
</script>
</head>
<body>


Bloque 29-30
<select name="bloque" id="bloque" onChange="cambia(this,'letra')">
<option value="0">Elige el Bloque</option>
<option value="29">29</option>
<option value="30">30</option>
</select>
Letra
<select name="letra" id="letra" onChange="cambia2(this,'apto')">
<option value="0">Letra</option>
</select>
Apto
<select name="apto" id="apto" onChange="cambia3(this,'')">
<option value="0">Apto</option>
</select>
</form>
<br></br>


Bloque 31-32
<select name="bloque2" id="bloque2" onChange="cambia3(this,'letra2')">
<option value="0">Elige el Bloque</option>
<option value="31">31</option>
<option value="32">32</option>
</select>
Letra
<select name="letra2" id="letra2" onChange="cambia4(this,'Apto2')">
<option value="0">Letra</option>
</select>
Apto
<select name="Apto2" id="Apto2" onChange="cambia5(this,'')">
<option value="0">Apto</option>
</select>

necesito que sean solo 3 select option en vez de 6, mas o menos como en esta imagen:

http://s2.subirimagenes.com/imagen/previo/thump_8487043select-option.png

pero que cada uno cambie con la informacion que le corresponde.
gracias de antemano por su ayuda y su tiempo
En línea
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: formulario select option con onchange
« Respuesta #1 en: 16 Junio 2013, 15:15 pm »
En vez de añadir opciones con javascript, yo los pondria directamente y luego solo ocultar/mostrar dependiendo de la selecion previa.

Ejemplo:
Código
  1. <script type="text/javascript">
  2. var seleccion = (function(item){
  3. 	/* Obtener el ID de la opcion selecionada */
  4. 	var selected = item.options[item.selectedIndex].id;
  5.  
  6. 	/* Obtener los options dentro del segundo select */
  7. 	var elementos = document.getElementById('select2').getElementsByTagName('option');
  8.  
  9. 	/* Por cada elemento en la lista "elementos" */
  10. 	for (var i=0; i<elementos.length; i++){
  11. 		/* Si el elemento tiene la misma clase que el id que se ha selecionado */
  12. 		if (elementos[i].className === selected){
  13. 			/* Le hacemos visible */
  14. 			elementos[i].style.display='block';
  15. 		} else {
  16. 			/* Si no, le ocultamos. */
  17. 			elementos[i].style.display='none';
  18. 		}
  19. 	}
  20. });
  21. </script>

Código
  1. <select id="select1" onchange="seleccion(this)">
  2. 	<option id="apto">Apto</option>
  3. 	<option id="sus">Suspendido</option>
  4. 	<option id="nose">No se sabe</option>
  6.  
  7. <select id="select2">
  8. 	<option selected disabled>-------</option>
  9. 	<option class="apto">Aprobado 1</option>
  10. 	<option class="apto">Aprobado 2</option>
  11.  
  12. 	<option class="sus">Suspendido 1</option>
  13. 	<option class="sus">Suspendido 2</option>
  14.  
  15. 	<option class="nose">No se sabe 1</option>
  16. 	<option class="nose">No se sabe 2</option>

Demo jsFiddle

Saludos
En línea
jecavi20

Desconectado Desconectado

Mensajes: 20


Ver Perfil
Re: formulario select option con onchange
« Respuesta #2 en: 17 Junio 2013, 03:36 am »
Excelente muchísimas gracias ya lo resolví gracias a tu ayuda
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Cambiar <option> seleccionada de un <select> segun valor en BD (PHP)
Desarrollo Web 		Aikanáro Anário 2 23,930 Último mensaje 21 Junio 2012, 22:19 pm
por Graphixx
onChange deja de funcionar al cambiar un <select> por un <input>
PHP 		KateLibby 0 1,907 Último mensaje 4 Junio 2013, 14:00 pm
por KateLibby
select, option
Desarrollo Web 		ElInquisidor 2 2,304 Último mensaje 16 Diciembre 2014, 17:49 pm
por ElInquisidor
select/option con dos renglones
Desarrollo Web 		basickdagger 1 2,361 Último mensaje 5 Febrero 2016, 12:11 pm
por #!drvy
Como hacer en una etiqueta <option> una función dentro de <select>
Desarrollo Web 		Drakaris 3 2,926 Último mensaje 18 Marzo 2017, 23:33 pm
por Drakaris
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines