¿Campo de texto o select en función de la opción elegida en otro select?

dandreta · #1 (**permalink**) 24/05/2007, 06:05

Hola!!

He estado revisando la FAQ y probando alguna cosiya pero no consigo que me funcione.

Estoy haciendo un buscador de personas. La cuestión es que tengo un select para poder elegir si buscar la persona por DNI, nombre o sexo. Al lado tengo un campo de texto para introducir los datos a buscar y un boton buscar:

Código HTML:

<html>
 <head>
  	<title>Buscar persona</title>		
 </head>
 <body>

	<table>
	<tr>
	<td width=12%>
	<select name="busqueda">
	<option value="1">DNI</option>
	<option value="2">Nombre</option>
	<option value="3">Sexo</option>
	</select>
	</td>
	<td>
	<input type="text" name="parametro" size="37">
	</td>
	<td>
	<input type=button value="Buscar">
	</td>
	</tr>
	</table>
	</form>
	
 </body>
</html>

La cuestión es que quiero que cuando en el select se seleccione DNI o nombre, este el campo de texto para meter los datos a buscar, pero cuando la opcion seleccionada sea sexo el campo de texto será sustituido por otro select donde las opciones sean hombre o mujer.

Espero haberme explicado bien y que me podais ayudar.
Gracias de antemano y un saludo

derkenuke · #2 (**permalink**) 24/05/2007, 12:11

Puedes tener los campos DNI, nombre y el select sexo en una capa oculta, y cuando se seleccione su debida opción, forzar ocultar todas y mostrar únicamente la correspondiente.

Supongo que es más fácil que añadir elementos dinámicamente.

Un saludo.

dandreta · #3 (**permalink**) 28/05/2007, 07:05

Gracias por responder derdenuke.
Pero no se como se hace lo que me dices. Me imagino que tendre que colocar un div en el html para crear la capa oculta. Pero como haria luego para hacer que esa capa este oculta y se muestre la capa correspondiente al elegir en el select.

Saludos

derkenuke · #4 (**permalink**) 29/05/2007, 13:27

Bueno, veamos.

En principio no pensaba hacerte todo el ejemplo entero pero me he puesto y al final...

Código PHP:

  <select onchange="cambiarCapa(this)">
    <option>-</option>
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>

<div id="capa1" style="display:none;"> 
    <input type="text" /> 
</div>
<div id="capa2" style="display:none;"> 
    <select>
        <option>1</option> 
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div id="capa3" style="display:none;"> 
    <input type="radio" name="radios" /> Uno <br/>
    <input type="radio" name="radios" /> Dos <br/>
    <input type="radio" name="radios" /> Tres <br/>
</div>


<script>

function cambiarCapa(elSelect) {
    var idCapaAmostrar;
    //escogemos la que nos interesa
    //según el texto de la opcion seleccionada del select
    switch( elSelect.options[ elSelect.options.selectedIndex ].text ) {        
        case "a":
            idCapaAmostrar="capa1";
        break;
        case "b":
            idCapaAmostrar="capa2";
        break;
        case "c":
            idCapaAmostrar="capa3";
        break;
    }
    var lasCapas=["capa1","capa2","capa3"];
    for(var i in lasCapas)                                                //ocultamos todas
        document.getElementById(lasCapas[i]).style.display="none";
    if(idCapaAmostrar!=undefined)
        document.getElementById(idCapaAmostrar).style.display="block";        //mostramos la que nos interesa
}

</script>

Podría ser así.

Si tienes dudas me dices.

Saludos.

dandreta · #5 (**permalink**) 01/06/2007, 06:10

Muchas gracias por responder!!
Ya lo he hecho y funciona.

Un saludo y gracias de nuevo