Foro - Perl en Español

La comunidad de programadores en Perl de habla hispana.

Obviar


  • Publicidad

Usar DynamicOptionList

Discute todo acerca de JavaScript así como DHTML o la tecnología AJAX.
Publicar una respuesta

Usar DynamicOptionList

Notapor marcosss » 2007-05-17 11:27 @519

Hola

¿Habéis usado alguna vez un DynamicOptionList? (más información en http://www.javascripttoolbox.com/lib/dy ... /index.php)

Pues yo estoy en ello pero tengo una duda que no consigo resolver, y llevo ya tiempo con esto. A ver yo tengo 3 select, y 2 de ellos dependen del valor del primero, de manera que cuando el usuario elija una opción en el primer select en los otros 2 que son dependientes de éste se actualicen con las opciones que se pueden elegir con esa opción que elijió el usuario en el primer select, ¿entendeis?.

Os ilustro con ejemplos:


Por ejemplo: dependiendo del sexo se podrá elegir un nombre u otro y un apellido u otro (el nombre y los apellidos dependen del sexo):


Sintáxis: [ Descargar ] [ Ocultar ]
  1. <html> 
  2. <head> 
  3. <title>Documento sin t&iacute;tulo</title> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
  5. </head> 
  6. <script type="text/javascript" src="dynamicoptionlist.js"></script> 
  7. <script type="text/javascript"> 
  8.  
  9. var namesSex = new DynamicOptionList(); 
  10. namesSex.addDependentFields("sex","names"); 
  11.  
  12. namesSex.forValue("boy").addOptions("Matt","Bob","Joe","Bill","John"); 
  13. namesSex.forValue("girl").addOptions("Jane","Angie","Jennifer","Amy","Sue"); 
  14.  
  15. namesSex.selectFirstOption = false; 
  16. </script> 
  17.  
  18.  
  19. <body onLoad="initDynamicOptionLists()"> 
  20. <form name="form1" action="" method="get"> 
  21.  
  22.  
  23. Sexo: <select name="sex"> 
  24. <option selected="selected" value="boy">boy</option> 
  25. <option value="girl">girl</option> 
  26. </select> 
  27.  
  28. Nombres: <select name="names"> 
  29. <script type="text/javascript">namesSex.printOptions("names")</script> 
  30. </select> 
  31.  
  32.  
  33.  
  34.  
  35. <script type="text/javascript"> 
  36.  
  37. var apellidoSex = new DynamicOptionList(); 
  38. apellidoSex.addDependentFields("sex1","apellidos"); 
  39.  
  40. apellidoSex.forValue("boy").addOptions("apellido1","apellido2"); 
  41. apellidoSex.forValue("girl").addOptions("apellido3","Apellido4"); 
  42.  
  43. apellidoSex.selectFirstOption = false; 
  44. </script> 
  45.  
  46. Sexo 2º: <select name="sex1"> 
  47. <option selected="selected" value="boy">boy</option> 
  48. <option value="girl">girl</option> 
  49. </select> 
  50.  
  51.  
  52.  
  53. Apellidos: <select name="apellidos"> 
  54. <script type="text/javascript">apellidoSex.printOptions("apellidos")</script> 
  55. </select> 
  56.  
  57. </form> 
  58. </body> 
  59. </html> 



De esta manera me funciona, pero no es lo que quiero, porque aquí en sexo aparecería 2 veces (sex y sex1), pero yo quiero que aparezca sólo 1 vez:

Sintáxis: [ Descargar ] [ Ocultar ]
  1. <html> 
  2. <head> 
  3. <title>Documento sin t&iacute;tulo</title> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
  5. </head> 
  6. <script type="text/javascript" src="dynamicoptionlist.js"></script> 
  7. <script type="text/javascript"> 
  8.  
  9. var namesSex = new DynamicOptionList(); 
  10. namesSex.addDependentFields("sex","names"); 
  11.  
  12. namesSex.forValue("boy").addOptions("Matt","Bob","Joe","Bill","John"); 
  13. namesSex.forValue("girl").addOptions("Jane","Angie","Jennifer","Amy","Sue"); 
  14.  
  15. namesSex.selectFirstOption = false; 
  16. </script> 
  17.  
  18.  
  19. <body onLoad="initDynamicOptionLists()"> 
  20. <form name="form1" action="" method="get"> 
  21.  
  22.  
  23. Sexo: <select name="sex"> 
  24. <option selected="selected" value="boy">boy</option> 
  25. <option value="girl">girl</option> 
  26. </select> 
  27.  
  28. Nombres: <select name="names"> 
  29. <script type="text/javascript">namesSex.printOptions("names")</script> 
  30. </select> 
  31.  
  32.  
  33.  
  34.  
  35. <script type="text/javascript"> 
  36.  
  37. var apellidoSex = new DynamicOptionList(); 
  38. apellidoSex.addDependentFields("sex","apellidos"); 
  39.  
  40. apellidoSex.forValue("boy").addOptions("apellido1","apellido2"); 
  41. apellidoSex.forValue("girl").addOptions("apellido3","Apellido4"); 
  42.  
  43. apellidoSex.selectFirstOption = false; 
  44. </script> 
  45.  
  46. Apellidos: <select name="apellidos"> 
  47. <script type="text/javascript">apellidoSex.printOptions("apellidos")</script> 
  48. </select> 
  49.  
  50. </form> 
  51. </body> 
  52. </html> 


Y quiero hacerlo usando los DynamicOptionList, pero es que no hay manera, llevo ya 1 semana estancado aquí y no hay manera....si me pudierais ayudar os lo agradecería.

Muchas gracias.
marcosss
Perlero nuevo
Perlero nuevo
 
Mensajes: 87
Registrado: 2007-05-14 06:23 @307
Arriba

Publicidad

Notapor explorer » 2007-05-17 16:50 @743

Prueba con solamente un addDependentFields:
Sintáxis: [ Descargar ] [ Ocultar ]
Using javascript Syntax Highlighting
addDependentFields("sex","names","apellidos");
Coloreado en 0.001 segundos, usando GeSHi 1.0.8.4

pero de esta manera, los dos select hijos tendrían las mismas opciones.

Otra posibilidad a mirar sería incorporar un evento Onchange en el select sex que llame a
Sintáxis: [ Descargar ] [ Ocultar ]
Using javascript Syntax Highlighting
change('names'); change('apellidos');
Coloreado en 0.000 segundos, usando GeSHi 1.0.8.4


(Sacado de la documentación de esa página).
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España
Arriba
Publicar una respuesta

Volver a JavaScript

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 2 invitados

Powered by phpBB® Forum Software © phpBB Group
Traducción al Español Mexicano por nextgen en colaboración con phpbb-es.com
phpBB SEO
Advertisements by Advertisement Management
cron