color en menu

pmike · #1 (**permalink**) 17/01/2011, 09:38

Hola a todos

Tengo una duda, resulta que tengo un menu de opciones, y me gustaria mostrar el color perteneciente a cada campo.

Ejemplo azul (que se muestre al lado el color azul).

Alguna sugerencia ???

Gracias

pepeluis1 · #2 (**permalink**) 17/01/2011, 09:42

NO entiendo lo que quieres hacer. Podrias explicarte mejor para ayudarte.

pmike · #3 (**permalink**) 17/01/2011, 12:26

si perdona.

aunque igual es más adecuado este tema para javascript.

Tengo

<select name="color_select">
<option selected="selected" value="1">azul oscuro</option>
<option value="7">azul claro</option>
<option value="2" >radial</option>
<option value="3" >marron</option>
<option value="4">verde oscuro</option>
<option value="6">verde claro</option>
<option value="5">lineal</option>
</select>

Y ademas quiero que se visualize el color respectivo por cada opción.
Gracias.

GatorV · #4 (**permalink**) 17/01/2011, 12:36

Tema movido desde PHP a Javascript

goteen_mx · #5 (**permalink**) 17/01/2011, 19:14

Será algo así?????

pq tampoco me queda claro.

<select>
<option value="0" style="background-color:#000000;">Negro</option>
<option value="1" style="background-color:#FFFFFF;">Blanco</option>
</select>

pmike · #6 (**permalink**) 19/01/2011, 12:53

Perdona por tardar tanto en contestar.

Si era eso lo que quería, el problema que tengo es a la hora de seleccionar un color determinado, una vez que hago clic, pues no me aparece el color en sí.

Y si que lo hace cada uno de ellos con su color respectivo en el menu de opciones una vez a desplegado con todos los colores.

son del tipo:

<option value="11" style="background-color:#FFFFCC;">amarillo</option>

Gracias

javiercitox · #7 (**permalink**) 19/01/2011, 12:58

no entiendo eso de "no me aparece el color en si"??? donde kieres q aparesca??

goteen_mx · #8 (**permalink**) 19/01/2011, 15:29

mi hermano tienes que explicarte mejor, pq la primera respuesta que te di como que estuve tratando de adivinar que querias.

Pregunto nuevamente, qué quieres? y se directo, claro y conciso.

Saludos.

pmike · #9 (**permalink**) 20/01/2011, 09:27

Tenemos un desplegable de tipo menu que es el siguiente (solo pongo un color pero es del color value=1 hasta el 9.

-------------------------------------------------
<select name="color_select">
<option selected="selected" value="1" style="background-color:#99CCFF;">azul</option>

</select>
------------------------------------------------

Hasta aqui los colores estan definidos por su nombre del color y el fondo del color (resultado de su forma hexadecimal) y aparece perfecto, una vez que desplegas todos los colores.

Pero cuando seleccionas cualquiera, me aparece solo el nombre, por ejemplo azul, pero su fondo no es azul, sino blanco. Es aquí donde me gustaria que fuese el fondo azul.

Un saludo y gracias.

SergeMedina · #10 (**permalink**) 20/01/2011, 09:51

Yo usaria lo siguiente:

Código HTML:

Ver original<select id="s">
     <option value="000000" style="background-color:#000000;">Negro</option>
     <option value="FFFFFF" style="background-color:#FFFFFF;">Blanco</option>
     <option value="F00" style="background-color:#F00;">Rojo</option>
     <option value="bada55" style="background-color:#bada55;">bada55</option>
  </select>

Código Javascript:

Ver originalvar s = document.getElementById('s');
 
s.addEventListener('change', function(){
  this.style.backgroundColor='#' + this.value;
}, true);

goteen_mx · #11 (**permalink**) 20/01/2011, 09:55

Ahi esta.

Código PHP:

  <html> 
<body> 
 
<script type="text/javascript"> 
 
function f_cambiaColor(slect){ document.getElementById("slect_c").style.backgroundColor=slect.options[slect.selectedIndex].style.backgroundColor; 
} 
 
</script> 
 
 
 
        <select id="slect_c" onchange="f_cambiaColor(this);"> 
             <option>Selecciona un color</option> 
            <option style="background-color:#999999;">Option 1</option> 
            <option style="background-color:#99CCFF;">Option 2</option> 
        </select>  
 
</body> 
</html>

Saludos.

goteen_mx · #12 (**permalink**) 20/01/2011, 09:59

Que elegante SergeMedina jejejeje

solo que nuestro amigo apenas esta aprendiendo js.

Salu2

pmike · #13 (**permalink**) 20/01/2011, 12:06

Te equivocas goteen_mx, entendí ambos códigos.

Según SergeMedina, creamos una variable 's' que recoje los datos del select para así utilizar el método 'addEventListener' que se incluye la función donde está el caracter '#' y su codigo hexadecimal.

Segun goteen_mx

function f_cambiaColor(slect){ document.getElementById("slect_c").style.backgroun dColor=slect.options[slect.selectedIndex].style.backgroundColor;
}

Tenemos la función f_cambiaColor y le pasamos como parametro 'slect' (que es seleccionado al hacer clic el usuario), y su color respectivo según el `select', y la pasamos al método getElementById del objeto document. Con él obtendremos el objeto que hace referencia al color con un identificador específico.
El objeto del elemento “slect_c” nos enlazará con:

<select id="slect_c" onchange="f_cambiaColor(this);">

Por último mediante el evento on change le decimos que aplique la función 'f_cambiaColor'.

A grandes rasgos es lo que significa.
Gracias a los dos por ayudarme, los dos códigos funcionan bien.
Saludos