0
141
Vistascolor de fondo individual de las opciones en <select> basado en el mapa
Me gustaría establecer un color de fondo individual para cada opción de <select> con Javascript. El texto y el color de la opción (hexadecimal) se almacenan en un Map :
const map = new Map(); map.set("005", "#886da8"); map.set("0075", "#ffc3cf"); for (const [key, value] of map.entries()) { console.log(key, value); $('#cmbExample').append($('<option>', { value: key, text : key })); }Finalmente debería verse así:
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Solo tiene que establecer el atributo de style con una propiedad de background usando el value .
La plantilla de literales es útil aquí.
const map = new Map(); map.set("005", "#886da8"); map.set("0075", "#ffc3cf"); map.set("01", "#ef9b00"); map.set("015", "#2bb430"); map.set("02", "#f7dc01"); map.set("025", "#bc65a2"); map.set("03", "#487ebf"); map.set("04", "#e00124"); map.set("05", "#b36634"); map.set("06", "#949494"); map.set("08", "#ffffff"); map.set("10", "#000000"); map.set("12", "#4bbbd0"); map.set("16", "#8b6d9f"); map.set("20", "#8ccff4"); for (const [key, value] of map.entries()) { // console.log(key, value); $('#cmbExample').append($('<option>', { value: key, text: key, style: `background: ${value}` // Set the style like this })); } // Select element let coulouredSelect = document.querySelector("#cmbExample") // change event callback setSelectColor = function(){ let value = coulouredSelect.value coulouredSelect.style.backgroundColor = coulouredSelect.querySelector(`option[value='${value}']`).style.background } // change event listener coulouredSelect.addEventListener("change", setSelectColor) // on page load setSelectColor() <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </head> <body> <div class="container"> <form> <select id="cmbExample" class="form-select mt-3"> </select> </form> </div> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body> </html>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta