[SOLUCIONADO] Duda con select

jairx_x1 · #1 (**permalink**) 17/04/2013, 13:58

Hola amigos quiero saber si se puede hacer esto: que cunado le den click a otro salga un cuadro de texto para escribir la otra opción.

Código HTML:

 <td><select name = "estu" class="sampletext">
        <option value="">--Select --</option>
		<option value="Tecnico">Tecnico</option>
		<option value="Tecnologico">Tecnologo</option>
        <option value="Universitario">Universitario</option>
		<option value="Especialista">Posgrado</option>
        <option value="Maestria">Maestria</option>
        <option value="Doctorado">Doctorado</option>
        <option value="Otros"></option>
        </select></td>

Muchas Gracias.

hackjose · #2 (**permalink**) 17/04/2013, 19:19

Claro que se puede

A tu select le debes poner el evento onchange y ponerle el manejador del evento

Esta funcion que se ejecuta cuando se lanza el evento onchange debe comprobar el valor del option seleccionado y si se selecciono otros que aparesca el cuadro de dialogo

Para acceder al valor del option debes usar

document.getElementById("id_del_select").options[indice_del_option].firstChild.data

Para que aparezca el cuadro de dialogo usa prompt();

Para agregar nuevos elementos option debes crearlos con el objeto option
new option

Como esos nuevos elementos option van ir antes del option que contiene el valor otros, debes agregar los nuevos option con insertBefore

Salu2

jairx_x1 · #3 (**permalink**) 18/04/2013, 10:10

Quiero algo asi pero con select y no con radio buton, sera que se puede cambiar.

Código HTML:

<html> 
	<head> 
	<script type="text/javascript">
	function mostrarReferencia(){
	if (document.fcontacto.Conocido[1].checked == true) {
	document.getElementById('desdeotro').style.display='block';
	}
	else {
	document.getElementById('desdeotro').style.display='none';
	}
	}
	</script>
	</head> 
 <body>

<form name="fcontacto">

<p>A través de donde nos has conocido:<br />

<input type="radio" name="Conocido"  onclick="mostrarReferencia();" /> Google
<input type="radio" name="Conocido"  onclick="mostrarReferencia();" /> Otros
</p>


<div id="desdeotro" style="display:none;">
<p>Referencia de la oferta:</p>
<p><input type="text" name="otro" class="input" /></p>
</div>
</body>
</html>

emprear · #4 (**permalink**) 18/04/2013, 13:16

Lo que propone @hackjose no lo entiendo

Ahora que si lo que querés es un campo de texto para poner el valor de otros, requiere de varias modificaciones para hacerlo desde un select, por lo pronto no usar el name para recuperar el valor ya que los option no conforman un array[]

Sería algo asi

Código:

<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
<script type="text/javascript">
function mostrarReferencia(){
var valor = document.getElementById('Conocido');
	if(valor.value != ""){
		if(valor.value != 'otros'){
		document.getElementById('desdeotro').style.display='none';
		}else {
		document.getElementById('desdeotro').style.display='block';
		}
	}else{
	document.getElementById('desdeotro').style.display='none';
	}
}
	</script>
	</head> 
 <body>

<form name="fcontacto">

<p>A través de donde nos has conocido:<br />
<select name="Conocido" id="Conocido" onchange="mostrarReferencia();">
<option value="">Seleccionar</option>
<option value="google">Google</option>
<option value="otros">Otros</option>
</select>
</p>
<div id="desdeotro" style="display:none;">
<p>Referencia de la oferta:</p>
<p><input type="text" name="otro" class="input" /></p>
</div>
</form>
</body>
</html>

eso si, deberás validar todo después

Saludos

jairx_x1 · #5 (**permalink**) 18/04/2013, 13:41

Ok funciona, muchas gracias ya con esto puedo seguir con mi trabajo.
Pero me surgio una duda;
Cuando se escoge la opcion otro y se despliega el cuadro para escribir al guardar en la base de datos va a cambiar el valor con el que se envía la variable cierto?, o el que se envía es esto? <form name="fcontacto"> y sigue siendo igual?

Gracias.

emprear · #6 (**permalink**) 18/04/2013, 13:56

Cita:

Iniciado por jairx_x1

Ok funciona, muchas gracias ya con esto puedo seguir con mi trabajo.
Pero me surgio una duda;
Cuando se escoge la opcion otro y se despliega el cuadro para escribir al guardar en la base de datos va a cambiar el valor con el que se envía la variable cierto?, o el que se envía es esto? <form name="fcontacto"> y sigue siendo igual?

Gracias.

lo que se envía son los name de cada elemento del formulario, ya sea por get(valor x defecto), o por post
Es decir recibirías
Conocidos (el name del select)
otros (el name del campo de texto, en realidad este lo vas a recibir siempre, porque aunque esté oculto lo envía). Esto me lleva a señalar otro detalle que no tuvimos en cuenta, supongamos que selecciona otros, llena el campo, pero despues corrije y selecciona goolge, vas a tener los dos valores, lo correcto sería al mismo tiempo que se oculta el campo. darle un value vacío, entonces quedaría

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
<script type="text/javascript">
function mostrarReferencia(){
var valor = document.getElementById('Conocido');
    if(valor.value != ""){
        if(valor.value != 'otros'){
        document.getElementById('desdeotro').style.display='none';
        }else {
        document.getElementById('desdeotro').style.display='block';
        document.getElementById('otro').value='';
        }
    }else{
    document.getElementById('desdeotro').style.display='none';
    document.getElementById('otro').value='';
    }
}
    </script>
    </head> 
 <body>
 
<form name="fcontacto">
 
<p>A través de donde nos has conocido:<br />
<select name="Conocido" id="Conocido" onchange="mostrarReferencia();">
<option value="">Seleccionar</option>
<option value="google">Google</option>
<option value="otros">Otros</option>
</select>
</p>
<div id="desdeotro" style="display:none;">
<p>Referencia de la oferta:</p>
<p><input type="text" name="otro" id="otro" class="input" /></p>
</div>
</form>
</body>
</html>

SAlu2

jairx_x1 · #7 (**permalink**) 18/04/2013, 14:35

Ok perfecto Funciona muy bien, Gracias emprear.

Gothgauss · #8 (**permalink**) 20/04/2013, 23:55

Si usas librerías como Jquery, podrás hacer un montón de cosas y efectos , pero de una manear fácil y sencilla.