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!