如何根据列表日期和当前日期之间的差异更改下拉列表项的背景颜色？

Question

我在（MVC 查看文件和使用 jQuery）中有一个下拉列表；其中有一些文本和一个日期格式为“yyyy-MM-dd”的子字符串，我能够提取日期并将日期与当前日期进行比较并获得差异，但是基于该差异，我想指定背景颜色。

我将dueDate 子字符串存储到一个变量中并获取当前日期以获取差异。因此，如果到期日期小于 1，则具有该特定日期的项目需要具有红色背景。当我保持 alert() 消息时，当条件为真时，控件进入 if 语句，但设置背景的代码不起作用。

截止日期已过的列表项需要有红色背景。在下面的 sn-p 中，只有第一项需要有红色背景。`

$(document).ready(function () {
            $("#ddldueDate").each(function () {
                //Extracting DueDate - type string
                var SelectedGroup = $(this).children("option").text();
                var dueDateStr = SelectedGroup.substring(SelectedGroup.lastIndexOf('[') + 1, SelectedGroup.lastIndexOf(']'));
                //Get current date - type string
                var d = new Date();
                var month = d.getMonth() + 1;
                var date = d.getDate();
                var currDateStr = d.getFullYear() + '-' + (month < 10 ? '0' : '') + month + '-' + (date < 10 ? '0' : '') + date;

                var diff = new Date(Date.parse(dueDateStr) - Date.parse(currDateStr));
                var days = diff / 86400000;
                //alert(days);
                if (days < 1) {
                    $(this).children("option").css({ "background-color": "red" });
                } else {
                    $(this).children("option").css({ "background-color": "white" });
                }
            });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12" style="width:auto">
    <select id='ddldueDate' class='form-control'>
      <option>[2019-07-27] Test 1</option>
      <option>[2021-07-24] Test 2</option>
    </select>
  </div>
</div>

`

Answer 1

我们可以使用 css 设置默认选择选项的样式。这是我找出所需内容的sn-p。回答我自己的问题，以防万一有人可以提供任何改进。

$(document).ready(function () {
            $("#ddldueDate > option").each(function () {
                //Extracting DueDate - type string
                var SelectedGroup = $(this).text();
                var dueDateStr = SelectedGroup.substring(SelectedGroup.lastIndexOf('[') + 1, SelectedGroup.lastIndexOf(']'));
                //Get current date - type string
                var d = new Date();
                var month = d.getMonth() + 1;
                var date = d.getDate();
                var currDateStr = d.getFullYear() + '-' + (month < 10 ? '0' : '') + month + '-' + (date < 10 ? '0' : '') + date;

                var diff = new Date(Date.parse(dueDateStr) - Date.parse(currDateStr));
                var days = diff / 86400000;
                if (days < 1) {
                    $(this).css({ "background-color": "maroon" });
                    $(this).css({ "color": "white" });
                } else {
                    $(this).css({ "background-color": "white" });
                    $(this).css({ "color": "black" });
                }
            });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12" style="width:auto">
    <select id='ddldueDate' class='form-control'>
      <option>[2020-07-27] Test 1</option>
      <option>[2021-07-24] Test 2</option>
      <option>[2019-07-27] Test 3</option>
      <option>[2019-07-24] Test 4</option>
    </select>
  </div>
</div>