Html, duda con <select>

joa_volf · #1 (**permalink**) 26/05/2012, 22:56

Hola soy nuevo en esto de html estoy aprendiendo, y necesito hacer lo siguiente aver si alguno me puede ayudar:

Un select con con las opciones (Que serían preguntas), y que al seleccionar una opcion me aparezca abajo un texto (La respuesta), pero que cada vez que selecciono una opcion nueva se borre el texto anterior y se ponga el texto nuevo.

No se si se entendió..

Ej:

Opciones:
¿Como te llamas?
¿Cuantos años tenes?

Si toco como te llamas me aparece "Joaquin", y si despues toco cuantos años tenes, se borra joaquin y aparece "18"

Gracias por su ayuda.

Naahuel · #2 (**permalink**) 26/05/2012, 23:18

Eso se logra con JavaScript. Tal vez exista una solución con CSS3 puro, pero sería muy compleja y poco compatible con la mayoría de los navegadores.

Te dejo un ejemplo usando la librería jQuery, sólo por el hecho de ser más directa y fácil de hacer. Podés lograr lo mismo con JavaScript puro.

El demo que hice usa el atributo "value" de los option para determinar la respuesta.

Demo: http://jsbin.com/onewus

Código:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#preguntas').change(function(){
            // acá realizo lo que quiero hacer cuando el select
            // con id "preguntas" cambie.
            
            var valor = $(this).val();      //Obtengo el valor seleccionado
            $('#resultado').text(valor)     //Aplico ese valor al elemento con id "resultado"
        });
    });
</script>
<title>Select de prueba</title>
</head>
<body>
    <select id="preguntas">
        <option>Seleccione una pregunta:</option>
        <option value="Nahuel">&iquest;Cu&aacute;l es tu nombre?</option>
        <option value="24">&iquest;Cu&aacute;ntos a&ntilde;os ten&eacute;s?</option>
    </select>
    <p id="resultado"></p>
</body>
</html>

joa_volf · #3 (**permalink**) 26/05/2012, 23:45

Ey, genial, gracias, pero una duda más..

Yo quiero que el texto que sea la respuesta, es decir el atributo "value" aparezca entre x y x posición. Me explico:

Si yo pongo un texto largo, al seleccione la opcion ese texto me ocupa de 1 punta de la web a la otra. Yo quiero que este centrado y que el texto este en el medio, sin que vaya de una punta a la otra.

¿Se entiende?

Ahora la respuesta aparece así:

Seleccione un item

RespuestaRespuestaRespuestaRespuestaRespuestaRespu estaRespuestaRespuestaRespuestaRespuestaRespuestaR espuestaRespuestaResp (Asi ocupando todo el largo de la web ---->)

Y quiero que aparezca así: (En el medio de la web nomas)

Seleccione un item

RespuestaRespuestaRespuestaRespuesta
RespuestaRespuestaRespuestaRespuesta
RespuestaRespuestaRespuestaRespuesta

Muchisimas gracias che

Naahuel · #4 (**permalink**) 27/05/2012, 08:48

:S

Eso ya es otro asunto. Lo harías con CSS.
http://jsbin.com/enumes

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
  
  <style>
    #contenedor{
      width: 300px;
      margin: 0 auto;
    }
  </style>
  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#preguntas').change(function(){
            // acá realizo lo que quiero hacer cuando el select
            // con id "preguntas" cambie.
            
            var valor = $(this).val();      //Obtengo el valor seleccionado
            $('#resultado').text(valor)     //Aplico ese valor al elemento con id "resultado"
        });
    });
</script>
<title>Select de prueba</title>
</head>
<body>
    <div id="contenedor">
      <select id="preguntas">
        <option>Seleccione una pregunta:</option>
        <option value="Nahuel">&iquest;Cu&aacute;l es tu nombre?</option>
        <option value="24">&iquest;Cu&aacute;ntos a&ntilde;os ten&eacute;s?</option>
    </select>
    <p id="resultado"></p>
  </div>
</body>
</html>

drakgoku1 · #5 (**permalink**) 27/05/2012, 09:54

Naahuel

usar acentos , tilde ... de esta forma "¿Cuántos años tenés"

Mejor usar : charset utf-8

Y si hay proyectos con iso-8859-1 hay opciones de modificación sin usar eso

Estamos en el 2012.

Naahuel · #6 (**permalink**) 27/05/2012, 09:57

Cita:

Iniciado por drakgoku1

Naahuel

usar acentos , tilde ... de esta forma "¿Cuántos años tenés"

Mejor usar : charset utf-8

Y si hay proyectos con iso-8859-1 hay opciones de modificación sin usar eso

Estamos en el 2012.