Ocultar un select y mostrar otro al pusar radio

franjgg · #1 (**permalink**) 21/06/2011, 05:54

hola amigos como estais,

Vereis tengo este codigo muy sencillo que al pulsar un radio muestra un select y al pulsar el otro lo oculta, la cosa es que necesitaria que al pulsar el primer radio mostrase el select pero que al pulsar el segundo radio ocultase el select del primer radio y mostrase otro select diferente.

<table width="44%" border="1">

<tr>
<td width="40%" class="parrafo"><div align="left"><strong>Posee SubNivel:</strong></div></td>
<td width="60%" class="parrafo">  Si
<input type="radio" name="radio" id="radio" value="radio" onClick="link1.style.display=''">
  No
<input type="radio" name="radio" id="radio2" value="radio" onClick="link1.style.display='none'"></td>
</tr>
<tr id="link1" style="display:none">
<td class="parrafo"> </td>
<td class="parrafo"><select name="select" id="select">
<option>dato1</option>
<option>datos1</option>
</select>
</td>
</tr>

</table>

A ver si alguien sabe como podria hacer esto, gracias de ante mano amigos.

Naahuel · #2 (**permalink**) 21/06/2011, 06:47

Ejemplo:

Código HTML:

Ver original<script>
  function  mostrar_select1(){
    
    document.getElementsByName('select2')[0].style.display = 'none';
    document.getElementsByName('select1')[0].style.display = 'block';
  }
    function  mostrar_select2(){
    document.getElementsByName('select1')[0].style.display = 'none';
    document.getElementsByName('select2')[0].style.display = 'block';
  }
</script>
 
<table width="44%" border="1">
 
<tr>
<td width="40%" class="parrafo"><div align="left"><strong>Posee SubNivel:</strong></div></td>
<td width="60%" class="parrafo">&nbsp;&nbsp;Si
<input type="radio" name="radio" id="radio" value="radio"  onClick="mostrar_select1()"> 
&nbsp;&nbsp;No
<input type="radio" name="radio" id="radio2" value="radio" onClick="mostrar_select2()"></td>
</tr>
<tr id="link1">
<td class="parrafo">&nbsp;</td>
<td class="parrafo">
  <select name="select1" id="select1" style="display:none;">
<option>dato1</option>
<option>datos1</option>
</select>
  
  <select name="select2" id="select2" style="display:none;">
<option>otras opciones 1</option>
<option>otras opciones 2</option>
</select>
</td>
</tr>
 
</table>

Lo único que hice fue modificar un poco tu código, pero no te recomiendo usar Javascript o CSS incrustados. Se hace dificil de seguir y mantener.

quimfv · #3 (**permalink**) 21/06/2011, 06:53

Código HTML:

Ver original<table width="44%" border="1">
 
<tr>
<td width="40%" class="parrafo"><div align="left"><strong>Posee SubNivel:</strong></div></td>
<td width="60%" class="parrafo">&nbsp;&nbsp;Si
<input type="radio" name="radio" id="radio" value="radio" onClick="link1.style.display='';link2.style.display='none'">
&nbsp;&nbsp;No
<input type="radio" name="radio" id="radio2" value="radio" onClick="link1.style.display='none';link2.style.display=''"></td>
</tr>
<tr id="link1" style="display:none">
<td class="parrafo">Select si, Sí&nbsp;</td>
<td class="parrafo"><select name="select1" id="select1">
<option>dato11</option>
<option>datos11</option>
</select>
</td>
</tr>
<tr id="link2" style="display:none">
<td class="parrafo">Select si, No&nbsp;</td>
<td class="parrafo"><select name="select2" id="select2">
<option>dato12</option>
<option>datos12</option>
</select>
</td>
</tr>
 
</table>

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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
function cambiaSelect(numIdSelect){
if(numIdSelect=="1"){
numIdOtroSelect="2";
}else{
numIdOtroSelect="1";
}
document.getElementById("link"+numIdSelect).style.display='';
document.getElementById("link"+numIdOtroSelect).style.display='none';
document.getElementById("select"+numIdOtroSelect).selectedIndex=0;
}
</script>
</head>
<body>
<table width="44%" border="1">
 
<tr>
<td width="40%" class="parrafo"><div align="left"><strong>Posee SubNivel:</strong></div></td>
<td width="60%" class="parrafo">&nbsp;&nbsp;Si
<input type="radio" name="radio" id="radio" value="radio" onClick="cambiaSelect('1')">
&nbsp;&nbsp;No
<input type="radio" name="radio" id="radio2" value="radio" onClick="cambiaSelect('2')"></td>
</tr>
<tr id="link1" style="display:none">
<td class="parrafo">Select si, Sí&nbsp;</td>
<td class="parrafo"><select name="select1" id="select1">
<option value="0">...</option>
<option value="1">dato11</option>
<option value="2">datos11</option>
</select>
</td>
</tr>
<tr id="link2" style="display:none">
<td class="parrafo">Select si, No&nbsp;</td>
<td class="parrafo"><select name="select2" id="select2">
<option value="0">...</option>
<option value="1">dato12</option>
<option value="2">datos12</option>
</select>
</td>
</tr>
 
</table>
</body>
</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

franjgg · #4 (**permalink**) 21/06/2011, 07:11

Gracias amigo por tu respuesta, es lo que estaba buscando.