varios colores en un mismo textarea desde lista desplegable

vale_N · #1 (**permalink**) 11/03/2014, 12:02

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.

Código:

<!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!

andresgarciadev · #2 (**permalink**) 13/03/2014, 10:29

creo que lo mejor que podrias hacer es crear un div que simule ser el text area, al cual envez de agregarle solo texto le agregarias un span con un style o una clase que le daran el color dependiendo del option seleccionado....
algo asi mira
http://jsfiddle.net/9LJMH/