JQuery - varios colores en textarea desde lista desplegable

   
Vista:

varios colores en textarea desde lista desplegable

Publicado por Ricchar (12 intervenciones) el 11/03/2014 19:02:26
Buenas mi problema es que tengo una lista donde depende lo que elijas deberia mostrar un color u otro, mi problema es que los colores los pone bien si solamente elijo un item de la lista, es decir, si elijo Ejemplos1 me lo escribe en rojo, pero si luego elijo Pruebas1 me escribe Ejemplos1 y Pruebas1 en azul, lo que quiero es que me escriba la variable del color que le corresponde y no que cambie todo el textarea cada vez que selecciono un item. Os dejo el codigo por si a alguien se le ocurre como podria implementarlo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="no-js" lang="en">
<head>
 
<meta name="description" content="" />
 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
 
</head>
 
<body>
 
<select name="seqselect" id ="seqselect" />
   <option selected> Choose an option </option>
       <optgroup id ="Ejemplos" style="color: #E9122F;" label="Ejemplos">
       <option value="Ejemplo1">Ejemplo1</option>
   </optgroup>
   <optgroup id ="Pruebas" style="color: #0B33E6;" Label="Pruebas">
       <option value="Pruebas1">Pruebas1</option>
   </optgroup>
</select>
 
<script>
$("#seqselect").change(function(){
 
    var selected = $("option:selected", this);
var colour = document.getElementById(selected.parent()[0].id).style.color;
 
if (document.getElementById('sequence').innerHTML == ""){
document.getElementById('sequence').innerHTML = this.value;
document.getElementById('sequence').style.color = colour;
}
else
{
document.getElementById('sequence').innerHTML = document.getElementById('sequence').innerHTML+" "+this.value;
document.getElementById('sequence').style.color = colour;
}
});
</script>
 
<textarea readonly style="resize:none; width:97%;" id="sequence" name="seq" rows="2" ></textarea><p>
 
</body>
</html>

Gracias!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

varios colores en textarea desde lista desplegable

Publicado por xve (557 intervenciones) el 12/03/2014 08:00:54
Hola Ricchar, el problema que tienes, es que un <textarea>, solo acepta un color, no puedes poner diferentes colores.

Para ello, tienes que utilizar un div en vez de un textarea, y poner un color a cada texto... mira este ejemplo haber que te parece:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="no-js" lang="en">
<head>
 
<meta name="description" content="" />
 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
 
</head>
 
<body>
 
<select name="seqselect" id ="seqselect" />
   <option selected> Choose an option </option>
       <optgroup id ="Ejemplos" style="color: #E9122F;" label="Ejemplos">
       <option value="Ejemplo1">Ejemplo1</option>
   </optgroup>
   <optgroup id ="Pruebas" style="color: #0B33E6;" Label="Pruebas">
       <option value="Pruebas1">Pruebas1</option>
   </optgroup>
</select>
 
<script>
$("#seqselect").change(function(){
 
    var selected = $("option:selected", this);
    var colour = document.getElementById(selected.parent()[0].id).style.color;
 
    document.getElementById('sequence').innerHTML = document.getElementById('sequence').innerHTML+" "+"<span style='color:"+colour+"'>"+this.value+"</span>";
    
});
</script>

<div style="resize:none; width:97%;" id="sequence" ></div><p>

</body>
</html>

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

varios colores en textarea desde lista desplegable

Publicado por Ricchar (12 intervenciones) el 12/03/2014 11:45:48
Muchas gracias, funciona perfecto!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

varios colores en textarea desde lista desplegable

Publicado por Ricchar (12 intervenciones) el 12/03/2014 17:12:34
Habria alguna opcion para poder poner 2 veces lo mismo? Me explico, si ahora mismo elijo ejempo1, lo hace perfecto, pero si pincho en la lista y vuelvo a elegir ejemplo1 no me lo escribe....

Alguna idea??

GRacias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

varios colores en textarea desde lista desplegable

Publicado por xve (557 intervenciones) el 12/03/2014 21:48:51
Hola Ricchar, eso es porque ejecutas el evento change, el cual no se activa si no cambias el valor...

Una opción, es poner siempre nuevamente la opción de "Choose an option"... haber que te parece:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="no-js" lang="en">
<head>
 
<meta name="description" content="" />
 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
 
</head>
 
<body>
 
<select name="seqselect" id ="seqselect" />
   <option selected value="0"> Choose an option </option>
       <optgroup id ="Ejemplos" style="color: #E9122F;" label="Ejemplos">
       <option value="Ejemplo1">Ejemplo1</option>
   </optgroup>
   <optgroup id ="Pruebas" style="color: #0B33E6;" Label="Pruebas">
       <option value="Pruebas1">Pruebas1</option>
   </optgroup>
</select>
 
<script>
$("#seqselect").change(function(){
 
    var selected = $("option:selected", this);
    var colour = document.getElementById(selected.parent()[0].id).style.color;
 
    document.getElementById('sequence').innerHTML = document.getElementById('sequence').innerHTML+" "+"<span style='color:"+colour+"'>"+this.value+"</span>";
    $("#seqselect").val(0);
});
</script>
 
<div style="resize:none; width:97%;" id="sequence" ></div><p>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar