0

Tengo un listado con unas opciones de: Bueno, Regular y Malo. Lo que quiero hacer, con PHP y Bootstrap, es que cuando se seleccione (por ejemplo, Bueno), todo el recuadro se ponga de color verde; cuando seleccione Regular, cambie a amarillo, pero quiero que cambie de color todo el div que lo contiene. No sé si haya forma de hacerlo.

<select  class="form-control" name='canon'>
  <div class="list-group">
    <option  <?php if($fila['canon']=='Bueno'){ echo "selected";}?> value="Bueno">Bueno </option>
    <option  <?php if($fila['canon']=='Regular'){ echo "selected";}?> value="Regular">Regular</option>
    <option  <?php if($fila['canon']=='Malo'){ echo "selected";}?> value="Malo">Malo</option>
    <option  <?php if($fila['canon']=='No posee'){ echo "selected";}?> value="No posee">No Posee</option>
  </div>
</select>

Quiero que al seleccionar alguna de estas opciones, todo el select se ponga del color, es decir, todo el select se ponga verde al seleccionar bueno, pero sólo al seleccionarlo cambie de color.

1

2 respuestas 2

0

En primer lugar, no podés poner un <div /> adentro de un <select />.

Habiendo aclarado lo anterior, mi sugerencia es vincular el evento onchange del <select /> para que asigne una clase al contenedor, de la siguiente forma:

function colorChange(e){
  let div = e.parentNode;
  switch(e.value){
    case 'bueno':
      div.style.backgroundColor = "green";
      break;
    case 'regular':
      div.style.backgroundColor = "yellow";
      break;
    case 'malo':
      div.style.backgroundColor = "red";
      break;
    default:
      div.style.backgroundColor = "";
      break;
  }
}
.contenedor {
  padding: 2px;
}
<div class="contenedor">
  <select onchange="colorChange(this)">
    <option value="">Seleccione una opción</option>
    <option value="bueno">Bueno</option>
    <option value="regular">Regular</option>
    <option value="malo">Malo</option>
  </select>
</div>
<div class="contenedor">
  <select onchange="colorChange(this)">
    <option value="">Seleccione una opción</option>
    <option value="bueno">Bueno</option>
    <option value="regular">Regular</option>
    <option value="malo">Malo</option>
  </select>
</div>

Usando la propiedad parentNode del elemento que ejecuta el llamado a la función (a través de la llamada colorChange(this), enviando el elemento como parámetro) podemos, de forma dinámica, cambiar el color únicamente del contenedor del <select /> que cambia de valor.

5
  • Ya lo hice, era eso mismo, gracias amigo, muy amable... Commented el 19 oct. 2018 a las 16:54
  • tengo otra duda, si quisiera agregar eso mismo a varios selects, como lo haría?, por que sólo me toma el primer select... Commented el 19 oct. 2018 a las 20:33
  • Solo debés incluir la llamada a la función en cualquier select que querás usar. Modifiqué el código para que tome el contenedor del select en cuestión.
    – Niche
    Commented el 19 oct. 2018 a las 21:33
  • Muchas gracias amigo, me has ayudado bastante, eres muy amable... Commented el 19 oct. 2018 a las 21:56
  • Si tu problema ha sido resuelto, marca la respuesta como aceptada para que informar a otros usuarios que la respuesta solucionó tu problema.
    – Niche
    Commented el 19 oct. 2018 a las 22:56
0

Podrías hacer algo así:

<script>
function setStatus(elem, key) {
    elem.setAttribute("class", "alert alert-" + key);
}
</script>

<div class="alert alert-primary" onclick="setStatus(this, 'success')">Bueno</div>
<div class="alert alert-primary" onclick="setStatus(this, 'warning')">Regular</div>
<div class="alert alert-primary" onclick="setStatus(this, 'danger')">Malo</div>

Te dejo un fiddle para que lo pruebes: https://jsfiddle.net/qb8vn26L/

2
  • Más o menos esa es la idea de lo que quiero hacer, déjame lo acomodo en mi código a ver si me funciona y te comento que tal me fue. Commented el 19 oct. 2018 a las 14:52
  • emm, bueno, pues no pude adaptarlo, pero te pongo un poco mi codigo como quisiera que fuera.. Commented el 19 oct. 2018 a las 15:52

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.