实现此功能的有效代码

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>

我希望此 UI 具有以下功能：

1. 如果“开始日期”和“结束日期”定义的日期跨度是过去的时间段（即颜色”下拉菜单应该只显示'Black'和'White'选项。

2. 如果日期跨度定义了未来期间（>今天），“颜色”下拉菜单仅显示 'red' 和 'green' 选项。

3. 如果日期跨度包含过去几天和未来几天，“颜色”下拉菜单仅显示“透明”选项。

如何使用高效、优雅的 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

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

• Chained
• Dependent Select
• Select Chain
• Related Selects