0

Buenas, necesito cambiar el color del select2 a través de JS(ya sea el background o lo que sea, es irrelevante), según el value del elemento seleccionado. Tengo lo siguiente que aunque no me funcione sirve para que se vea como lo quiero hacer.

var color;
$('.select_color').map(function(i) {
    color = $(this).find("option:selected").val();
});

if (color == 1) {
    return '<select class="select_color rojo"><option value='+data.id_color+'>'+data.color+'</option></select>';
}else if (color == 2) {
    return '<select class="select_color amarillo"><option value='+data.id_color+'>'+data.color+'</option></select>';
}else if (color == 3) {
    return '<select class="select_color verde"><option value='+data.id_color+'>'+data.color+'</option></select>';
}else{
    return 'Selecciona un elemento';
}
1
  • Corrigeme si entendi mal, quieres cambiar el color del elemento selecionado en un select2?
    – Einer
    el 5 dic. 2017 a las 12:34

1 respuesta 1

1

He puesto onchange="myFunction(this.value)". Esto llamará a la función cada vez que se cambie el valor del select. Y mandará como parámetro el valor seleccionado.

Ahora solo queda realizar los if y cambiar el color según lo que necesites.

function myFunction(val){

  if (val == 1) {
document.getElementById("select_color").style.backgroundColor = "red";
  }else if (val == 2) {
  document.getElementById("select_color").style.backgroundColor = "yellow";
  }else if (val == 3) {
  document.getElementById("select_color").style.backgroundColor = "green";
  }else{
     return 'Selecciona un elemento';
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_color" onchange="myFunction(this.value)">
 <option value="1">Rojo</option>
  <option value="2">Amarillo</option>
  <option value="3">Verde</option>
</select>

Esta sería una segunda manera. Te puede servir si rellenas el value con tus datos data.color.

function myFunction(val){
document.getElementById("select_color").style.backgroundColor = val

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_color" onchange="myFunction(this.value)">
 <option value="Red">Rojo</option>
  <option value="Yellow">Amarillo</option>
  <option value="Green">Verde</option>
</select>

3
  • Utilizo select2, es decir, los elementos son dinámicos, me los traigo mediante AJAX, por lo que no hay un número fijo de options.
    – ccfz
    el 5 dic. 2017 a las 11:55
  • Actualizo la respuesta.
    – Flowen
    el 5 dic. 2017 a las 12:09
  • @Flowen ya solo te falta agregar un evento que ponga el color del seleccionado. :D (osease si entran a editar o es la primera vez y ya hay un color elegido)
    – elporfirio
    el 7 dic. 2017 a las 14:38

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.