Cambiar texto en span con Jquery

alavaros · #1 (**permalink**) 01/04/2011, 06:02

Buenas, tengo un select, por ejemplo:

Código HTML:

Ver original<select name="escala" id="escala">
                <option value="Nivel 1">Nivel 1</option>
                <option value="Nivel 2">Nivel 2</option>
                <option value="Nivel 3">Nivel 3</option>
                <option value="Nivel 4">Nivel 4</option>
                <option value="Nivel 5">Nivel 5</option>
                <option value="Nivel 6">Nivel 6</option>
</select>

y justo debajo tengo una etiqueta span:

Código HTML:

Ver original<span id="descripcion"></span>

y quiero que cuando cambie la opción elegida, en el span aparezca un texto con la descripción, pero no consigo hacerlo.

Probando cositas he hecho algo así:

Código Javascript:

Ver original$('#escala').change(function() {
  alert('Hola');
});

pero al inspeccionar elemento, en Chrome, me indica un error, que no se cual es:
Uncaught TypeError: Cannot call method 'change' of null

¿Alguna idea de como introducir texto?¿...del error?

JavierB · #2 (**permalink**) 01/04/2011, 08:14

Hola, alavaros

Muevo tu tema al foro de Frameworks y Plugins Javascript desde Javascript.

Saludos,

Dany_s · #3 (**permalink**) 01/04/2011, 08:35

para introducir texto en algún elemento usa el método text()

por ejemplo lo que hago en este ejemplo es introducir el valor del option seleccionado en el span #descripcion

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
        <script>
 
        $(function(){
 
            $('#escala').change(function() {
                $('#descripcion').text( $(this).val() );
            });
 
        });
 
        </script>
    </head>
    <body>
 
    <select name="escala" id="escala">
        <option value="Nivel 1">Nivel 1</option>
        <option value="Nivel 2">Nivel 2</option>
        <option value="Nivel 3">Nivel 3</option>
        <option value="Nivel 4">Nivel 4</option>
        <option value="Nivel 5">Nivel 5</option>
        <option value="Nivel 6">Nivel 6</option>
    </select>
 
    <span id="descripcion"></span>
    </body>
</html>

pero creo que lo que quieres logras es obtener datos según la opción seleccionada, no?

alavaros · #4 (**permalink**) 04/04/2011, 02:53

Cita:

Iniciado por Dany_s

para introducir texto en algún elemento usa el método text()

por ejemplo lo que hago en este ejemplo es introducir el valor del option seleccionado en el span #descripcion

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
        <script>
 
        $(function(){
 
            $('#escala').change(function() {
                $('#descripcion').text( $(this).val() );
            });
 
        });
 
        </script>
    </head>
    <body>
 
    <select name="escala" id="escala">
        <option value="Nivel 1">Nivel 1</option>
        <option value="Nivel 2">Nivel 2</option>
        <option value="Nivel 3">Nivel 3</option>
        <option value="Nivel 4">Nivel 4</option>
        <option value="Nivel 5">Nivel 5</option>
        <option value="Nivel 6">Nivel 6</option>
    </select>
 
    <span id="descripcion"></span>
    </body>
</html>

pero creo que lo que quieres logras es obtener datos según la opción seleccionada, no?

Bueno lo que quiero es bśsicamente lo que has puesto, es escribir un texto en el span, que no sea el valor del option, es como una descripción del nivel seleccionado. Probaré a partir de lo que has puesto.

Muchas gracias!

InKarC · #5 (**permalink**) 04/04/2011, 10:23

Los values no deben tener espacios.

Y lo que quieres hacer es algo asi:

Código Javascript:

Ver original$('#escala').change(function() {
 
                var descripcion;
                 var valor = $(this).val();
 
                switch(valor){
                case "Level1":
                descripcion = "El nivel mas facil";
                break;
 
                case "Level2":
                descripcion = "El nivel para experimentados";
                break;
                }
 
                $('#descripcion').html(descripcion);
 
 
 
            });

Por cierto cuando el elemento al que quieres agregar la información no tiene "hijos" es mejor usar .html que .text, es mucho mas rápido.

alavaros · #6 (**permalink**) 06/04/2011, 07:45

Cita:

Iniciado por InKarC

Los values no deben tener espacios.

Y lo que quieres hacer es algo asi:

Código Javascript:

Ver original$('#escala').change(function() {
 
                var descripcion;
                 var valor = $(this).val();
 
                switch(valor){
                case "Level1":
                descripcion = "El nivel mas facil";
                break;
 
                case "Level2":
                descripcion = "El nivel para experimentados";
                break;
                }
 
                $('#descripcion').html(descripcion);
 
 
 
            });

Por cierto cuando el elemento al que quieres agregar la información no tiene "hijos" es mejor usar .html que .text, es mucho mas rápido.

Perfecto, parece que eso me servirá, muchas gracias.

Saludos