Ver Mensaje Individual
  #3 (permalink)  
Antiguo 21/06/2011, 06:53
quimfv
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 17 años
Puntos: 574
Respuesta: Ocultar un select y mostrar otro al pusar radio

Código HTML:
Ver original
  1. <table width="44%" border="1">
  2.  
  3. <tr>
  4. <td width="40%" class="parrafo"><div align="left"><strong>Posee SubNivel:</strong></div></td>
  5. <td width="60%" class="parrafo">&nbsp;&nbsp;Si
  6. <input type="radio" name="radio" id="radio" value="radio" onClick="link1.style.display='';link2.style.display='none'">
  7. &nbsp;&nbsp;No
  8. <input type="radio" name="radio" id="radio2" value="radio" onClick="link1.style.display='none';link2.style.display=''"></td>
  9. </tr>
  10. <tr id="link1" style="display:none">
  11. <td class="parrafo">Select si, Sí&nbsp;</td>
  12. <td class="parrafo"><select name="select1" id="select1">
  13. <option>dato11</option>
  14. <option>datos11</option>
  15. </td>
  16. </tr>
  17. <tr id="link2" style="display:none">
  18. <td class="parrafo">Select si, No&nbsp;</td>
  19. <td class="parrafo"><select name="select2" id="select2">
  20. <option>dato12</option>
  21. <option>datos12</option>
  22. </td>
  23. </tr>
  24.  

Fàcil no?... ojo que el select sigue existiendo y el formulario lo mandará... pero eso ya te ocurria antes....

Lo suyo seria que te asegures que el select oculto tenga el valor nulo....

Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <title>Documento sin t&iacute;tulo</title>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4. <script language="JavaScript" type="text/JavaScript">
  5. function cambiaSelect(numIdSelect){
  6. if(numIdSelect=="1"){
  7. numIdOtroSelect="2";
  8. }else{
  9. numIdOtroSelect="1";
  10. }
  11. document.getElementById("link"+numIdSelect).style.display='';
  12. document.getElementById("link"+numIdOtroSelect).style.display='none';
  13. document.getElementById("select"+numIdOtroSelect).selectedIndex=0;
  14. }
  15. </head>
  16. <table width="44%" border="1">
  17.  
  18. <tr>
  19. <td width="40%" class="parrafo"><div align="left"><strong>Posee SubNivel:</strong></div></td>
  20. <td width="60%" class="parrafo">&nbsp;&nbsp;Si
  21. <input type="radio" name="radio" id="radio" value="radio" onClick="cambiaSelect('1')">
  22. &nbsp;&nbsp;No
  23. <input type="radio" name="radio" id="radio2" value="radio" onClick="cambiaSelect('2')"></td>
  24. </tr>
  25. <tr id="link1" style="display:none">
  26. <td class="parrafo">Select si, Sí&nbsp;</td>
  27. <td class="parrafo"><select name="select1" id="select1">
  28. <option value="0">...</option>
  29. <option value="1">dato11</option>
  30. <option value="2">datos11</option>
  31. </td>
  32. </tr>
  33. <tr id="link2" style="display:none">
  34. <td class="parrafo">Select si, No&nbsp;</td>
  35. <td class="parrafo"><select name="select2" id="select2">
  36. <option value="0">...</option>
  37. <option value="1">dato12</option>
  38. <option value="2">datos12</option>
  39. </td>
  40. </tr>
  41.  
  42. </body>
  43. </html>

Cuydado lo contrario de

.style.display='none';

no es

.style.display='block';

si no

.style.display='';

aún que lo parezca...


Otra cosa

.selectedIndex=0;

será el valor nulo porque considero que este, el valor nulo, es la opción que he puesto en primer lugar

<option value="0">...</option>

que su value="0" no tiene nada que ver con el selectedIndex=0
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.

Última edición por quimfv; 21/06/2011 a las 07:01