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

Question

我在(使用jquery(中有一个下拉列表;它具有一些文本和一个带有日期的子字符串，以" yyyy-mm-dd"格式，我能够提取＆amp;将日期与当前日期进行比较＆amp;得到差异，但是基于这种差异，我想指定背部颜色。

我将Duedate子字符串存储到一个变量中，并获取当前日期以获取差异。因此，如果截止日期小于1，则具有该特定日期的项目需要具有红色背景。当我保持警报((测量时，控件正在进入IF语句中，当条件为真时

截止日期已通过的列表项目需要具有红色背景。在下面的摘要中，只有第一项需要具有红色背景。

$(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样式选择默认的选择选项。这是我弄清楚所需的片段。回答我自己的问题，以防是否有人提供任何改进。

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