Question

在我的页面中，我有三个输入字段，“开始日期”，“结束日期”和“颜色”下拉列表菜单，如下：

<label>Start date (yyyy-mm-dd):</label>
<input id='start_date' type='text'></input>
<br>
<label>End date (yyyy-mm-dd):</label>
<input id='end_date' type='text'></input>
<br>
<label>Color:</label>
<select id="color">
    <option value="white" selected="selected">White</option>
    <option value="black">Black</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="green">Transparent</option>
</select>

我想为此用户界面提供以下功能：

如果由“开始日期”和“结束日期”定义的日期范围是过去一段时间（即＆lt; =今天），则“颜色“下拉菜单只应显示'黑'和'白'选项。
如果日期范围定义了未来期间（＆gt;今天），则“颜色”下拉列表仅显示'红色'和'绿色'选项。
如果日期范围包含过去几天和未来几天，则“颜色”下拉菜单仅显示“透明”选项。

如何使用高效，优雅的jQuery / javascript代码实现此功能？

我目前的jQuery代码：

$("#end_date").click(update_options())

function update_options(){
    var start_date = $("#start_date").val();
    var end_date = $("#end_date").val();

    var startDate= new Date(start_date);
    var endDate= new Date(end_date);
    var today = new Date().setHours(0, 0, 0, 0);

    if(endDate < today){
        $('#color').get(2,3,4).remove()
    }
    else if(startDate<=today && endDate>=today){
        $('#color').get(0,1,2,3).remove()
    }
    else{
        $('#color').get(0,1,4).remove()
    }

}

这似乎不正常而且不优雅

Answer 1

这些插件中的任何一个都可能是您正在寻找的。

实现此功能的高效代码

1 个答案: