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
    Commented 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
    Commented el 5 dic. 2017 a las 11:55
  • Actualizo la respuesta.
    – Flowen
    Commented 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
    Commented el 7 dic. 2017 a las 14:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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