[SOLUCIONADO] Valor de select al instante

mbm150 · #1 (**permalink**) 01/04/2013, 07:04

Hola a todos, estoy empezando a programar y me he perdido un poco.

Lo que quiero hacer es enviar un formulario (hasta hay bien), pero hay un select. Nada más seleccionar el select quiero que aparezca un texto según el valor de este.

Este es el html:

Código HTML:

Ver original<p id="elegido"></p>
                    <form action="envio.php" method="post">
                        <p class="envio">
                            <select id="tipo">
                                <option value="animales">Animales</option>
                                <option value="ciencia">Ciencia</option>
                                <option value="comparaciones">Comparaciones</option>
                                <option value="deportes">Deportes</option>
                                <option value="etnicos">Étnicos</option>
                                <option value="familiares">Familiares</option>
                                <option value="informatica">Informática</option>
                                <option value="ninos">Niños</option>
                                <option value="preguntas">Preguntas</option>
                                <option value="profesiones">Profesiones</option>
                                <option value="salud">Salud</option>
                                <option value="sexo">Sexo</option>
                                <option value="sociedad">Sociedad</option>
                                <option value="otros">Otros</option>
                            </select>
                        </p>
                    </form>

Quiero que al seleccionar una opción, al instante se escriba una descripción en el campo p que he puesto arriba.

Es necesario AJAX para esto? Es que no tengo ni idea de ajax...

Gracias por la ayuda.

emprear · #2 (**permalink**) 01/04/2013, 08:26

Podés obtenerlo sabiendo el value del select identificado por su id, como lo normal es llamar la función con el evento onchange, es aconsejable incluir un option inicial con un valor vacio

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
function valor_select(){
var valor = document.getElementById('tipo').value;
if (valor != ""){
alert(valor);
}
}
//]]>
</script>
</head>
<body>
<p id="elegido"></p>
                    <form action="envio.php" method="post">
                        <p class="envio">
                            <select id="tipo" onchange="valor_select();">
                            <option value="">Seleccionar</option>
                                <option value="animales">Animales</option>
                                <option value="ciencia">Ciencia</option>
                                <option value="comparaciones">Comparaciones</option>
                                <option value="deportes">Deportes</option>
                                <option value="etnicos">Étnicos</option>
                                <option value="familiares">Familiares</option>
                                <option value="informatica">Informática</option>
                                <option value="ninos">Niños</option>
                                <option value="preguntas">Preguntas</option>
                                <option value="profesiones">Profesiones</option>
                                <option value="salud">Salud</option>
                                <option value="sexo">Sexo</option>
                                <option value="sociedad">Sociedad</option>
                                <option value="otros">Otros</option>
                            </select>
                        </p>
                    </form>
</body>
</html>

SAludos

marlanga · #3 (**permalink**) 01/04/2013, 08:54

Puedes crear un nuevo atributo a cada option con el texto adecuado para tener todo mejor organizado y para que el html final sea más fácil de imprimir con PHP u otro lenguaje de servidor.

http://jsfiddle.net/marlanga/dAmwj/1/

mbm150 · #4 (**permalink**) 01/04/2013, 09:00

Funciono perfecto, muchas gracias!!

mbm150 · #5 (**permalink**) 01/04/2013, 09:03

Iba a hacerlo con if(valor=="animales") y asi aunque ese modo también me gusta, gracias por la ayuda.