Mostrar distinto select dependiendo de radio

sqa212 · #1 (**permalink**) 03/05/2004, 05:09

Tengo un boton de radio con dos posibles valores, se podria hacer de alguna forma que
dependiendo del que se selecione se muestre un select u otro.

Hombre<input type="radio" name="sexo" value="h">
Mujer<input type="radio" name="sexo" value="m">

Si es hombre quiero que se muestre este select.
<select name="estadocivil">
<option value="soltero" selected>Soltero
<option value="casado">Casado
<option value="separado">Separado
<option value="divorciado">Divorciado
<option value="viudo">Viudo
</select>
Si es mujer quiero que se muestre este select.
<select name="estadocivil">
<option value="soltera" selected>Soltera
<option value="casada">Casada
<option value="separada">Separada
<option value="divorciada">Divorciada
<option value="viuda">Viuda
</select>
Gracias por anticipado

caricatos · #2 (**permalink**) 03/05/2004, 05:33

Hola sqa212:

Si los select tuviesen distinto nombre (name) se podría conseguir de distintas maneras, pero no creo que se pueden duplicar los nombres de los select (aunque si que se debe hacer con los radios y checkboxes)

Si le pones distinto nombre puedes poner el que te sirva con estilo display = block, y su atributo disabled a false..., y el otro con
con display = none y disabled a true...

Pero si no te interesa esta idea, siempre puedes generar dinámicamente las opciones del select...

Creo que en las FAQs está implementado.

Saludos

sqa212 · #3 (**permalink**) 03/05/2004, 13:01

Si le pones distinto nombre puedes poner el que te sirva con estilo display = block, y su atributo disabled a false..., y el otro con
con display = none y disabled a true...

No te entiendo bien lo que me quieres decir. Podria usar distintos nombres en el select, eso no seria un problema.

caricatos · #4 (**permalink**) 03/05/2004, 16:19

Hola otra vez:

Fíjate si te sirve este ejemplo:

Código PHP:

  <html>

<head>

<script>

function selector(dato, estado){

 document.forms.prueba.estadocivilH.style.display = (dato == "m") ? "none" : "inline";

 document.forms.prueba.estadocivilM.style.display = (dato == "h") ? "none" : "inline";

 document.forms.prueba.estadocivilH.disabled = (dato == "m") ? true : false;

 document.forms.prueba.estadocivilM.disabled = (dato == "h") ? true : false;

}

</script>

</head>

<body>

<form name=prueba method.get action=prueba.html>

Hombre<input type="radio" name="sexo" value="h" onclick="selector(this.value, this.checked)">

Mujer<input type="radio" name="sexo" value="m" onclick="selector(this.value, this.checked)">

 
<select name="estadocivilH" style="display: none">

<option value="soltero" selected>Soltero

<option value="casado">Casado

<option value="separado">Separado

<option value="divorciado">Divorciado

<option value="viudo">Viudo

</select>

 
<select name="estadocivilM" style="display: none">

<option value="soltera" selected>Soltera

<option value="casada">Casada

<option value="separada">Separada

<option value="divorciada">Divorciada

<option value="viuda">Viuda

</select>

<input type="submit" />

</form>

</body>

</html>

Saludos

sqa212 · #5 (**permalink**) 05/05/2004, 17:31

Gracias por tu respuesta funciona perfectamente.
el problema ahora es que ese select formaria parte de un formulario mas amplio que pensaba enviar con el metodo post,
Tu usas <form name=prueba method.get action=prueba.html>
¿Ahi alguna forma de integrar ambos formularios?

caricatos · #6 (**permalink**) 05/05/2004, 22:03

Hola otra vez:

Puedes usar tranquilamente el método post, yo suelo usar get en las pruebas para que se muestre el resultado en la línea de dirección, pero no es obligatorio.

Saludos