选项的 HTML-CSS 背景颜色

Question

I'm working on an option form. I want each option to have a different color on the scroll down and once an option is selected I want to save it, and display the selection and color.

What I want to be able to do is save the form, come back to the page and see the option I previously selected while displaying the color. In the picture above 2020 shows an example of the options. What I want after I save the form is for my selection to appear (like in 2021) with the selection color(in this case 2021 is medium/yellow). What can I do so that the selected box option takes the color of the option in the scroll down? How can I save this so that the option remains selected the next time I visit the page?

HTML

<form action="" method="post">
{% csrf_token %}
        {% for year in years %}
        <select name="rating" id="{{year.id}}">
        <script src="{% static 'SCS/scripts/script.js' %}"/></script> 
            <option>Choose From List</option>
            <option class=green value="green">High</option>
            <option class=yellow value="yellow">Medium</option>
            <option class=orange value="orange">Low</option>
            <option class=gray value="gray">N/A</option>
        </select> 
            <input type="hidden" name="year" value={{year.fy_year}}>
        {% endfor %}
        <input id=save_cap type="submit" value="Save">
      </form>

CSS

.green{
    background-color: green;
}

.yellow{
    background-color: yellow;
}

.orange{
    background-color: orangered;
}

.gray{
    background-color: gray;
}

Answer 1

You need some JavaScript to achieve your goals.

To do so that the selected box option takes the color of the option in the scroll down you can write:

document.getElementById("rating").addEventListener("change", function() {
    this.className = this.value;
});

This code takes the selected option value and sets it as a class name of the select . To make it work you have to add some values to your options:

<select name="rating" id="rating">
    <option class=white value="white">Choose From List</option>
    <option class=green value="green">High</option>
    <option class=yellow value="yellow">Medium</option>
    <option class=orange value="orange">Low</option>
    <option class=gray value="gray">N/A</option>
</select>

And to save the selected option you need localStorage :

let selected = localStorage.getItem("selected");
let rating = document.getElementById("rating");

if (selected) {
    rating.selectedIndex = selected;
    rating.className = rating.value;
}

rating.addEventListener("change", function() {
    localStorage.setItem("selected", this.selectedIndex);
    this.className = this.value;
});

Check the working JSFiddle .

Answer 2

I'm used to jQuery so this has been a learning experience for me but I do have a solution for you. I'll take you through my logic, and the snippet is below (possibly due to cookies I could only get it to work locally and on the w3 demo):

1. Add values to the options: <option class="green" value="high">High</option> so we can retrieve them and store the values in a cookie

2. Set a change event listener to change color, s being a : s.addEventListener( 'change', changeColor );

3. Once we've changed the color with this.className += this.selectedOptions[0].className; more info here

4. Then we can pass the information to a cookie with setCookie( this.id, this.value ); more info here

5. Now we've got changing colours and stored cookies, we need to be able to load any stored values on document ready , so here goes:

    let cookie = getCookie ( `select-${s.id}` ); // if cookie is not empty, set selected option and change color if ( cookie != '' ) { s.value = cookie; s.className += s.selectedOptions[0].className; }

Now we have:

• changing colour
• stored values
• loaded values

There's definitely (in the other answer actually) a better, more concise way to do this, but I hope that some of the links will help you understand more about what's going on :)

 // set up onChange event listeners function setSelectOnChangeListeners() { // select all of your <select>'s const selects = document.getElementsByTagName("select"); // for each of your <select>'s for (s of selects) { // add an onChange event listener to trigger function changeColor(); s.addEventListener('change', changeColor); } } // on <select> onChange event, change color to selected option color based on class function changeColor() { // this is the interesting part, where you can return which item has been selected in your <select> console.log(`class = ${this.selectedOptions[0].className}`); // clear existing className, note that if you want to have a class on your select, you can set the below equal to that instead of '' this.className = ''; // set <select> className to the selected <option> className this.className += this.selectedOptions[0].className; // after we've changed the color, we'll change the cookie setCookie(this.id, this.value); } // set cookies with format "select-<id> = <val>" function setCookie(id, val) { // cookies are stored as key | value pairs document.cookie = `select-${ id } = ${ val }`; console.log(`cookie set with data ${id}, ${val}`); } // w3 get cookie method function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } // on document load document.addEventListener('DOMContentLoaded', function(event) { // for each select, try to load cookie data const selects = document.getElementsByTagName("select"); for (s of selects) { let id = s.id; let cookie = getCookie(`select-${s.id}`); // if cookie is not empty, set selected option and change color if (cookie != '') { s.value = cookie; s.className += s.selectedOptions[0].className; } } // set listeners setSelectOnChangeListeners(); });

 .green { background-color: green } .yellow { background-color: #ff0 } .orange { background-color: #ff4500 } .gray { background-color: gray }

 <select id="2020" name="rating"> <option>Choose From List</option> <option class="green" value="high">High</option> <option class="yellow" value="medium">Medium</option> <option class="orange" value="low">Low</option> <option class="gray" value="none">N/A</option> </select> <select id="2021" name="rating"> <option>Choose From List</option> <option class="green" value="high">High</option> <option class="yellow" value="medium">Medium</option> <option class="orange" value="low">Low</option> <option class="gray" value="none">N/A</option> </select>