javascript - HTML-CSS 选项的背景颜色

Question

我正在制作选项表。我希望每个选项在向下滚动时都有不同的颜色，一旦选择了一个选项，我想保存它，并显示选择和颜色。

我想要做的是保存表格，返回页面并查看我之前在显示颜色时选择的选项。上图中 2020 显示了一个选项示例。保存表格后，我想要的是让我的选择以选择颜色(在本例中 2021 为中/黄色)出现(如 2021 年)。我该怎么做才能使选定的框选项采用向下滚动中选项的颜色？我怎样才能保存它以便下次访问该页面时该选项保持选中状态？

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

您需要一些 JavaScript 来实现您的目标。

要使选中的框选项采用向下滚动中选项的颜色，您可以这样写:

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

此代码采用选定的选项值并将其设置为 select 的类名。为了让它工作，你必须为你的选项添加一些值:

<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>

要保存所选选项，您需要 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;
});

检查 the working JSFiddle .