使用javascript根据第一个选择列表选项更改第二个选择列表

我有两个从数据库中存储的相同日期数组填充的下拉列表。我想使用javascript或jquery根据第一个列表中的选择更改第二个下拉列表。例如，如果用户在第一个开始日期列表中选择2012年3月3日，那么我希望第二个列表只显示或允许数组中的未来日期。3/3、3/2和3/1将变灰或删除，3/4、3/5将保留为可选选项。有人可以帮助编写javascript代码或提出其他建议吗

<select id='start_date' name='data[sDate]' title='Use the drop list'>
<option value="" selected="selected"> </option>
<option value="03/05/2012">03/05/2012</option>
<option value="03/04/2012">03/04/2012</option>
<option value="03/03/2012">03/03/2012</option>
<option value="03/02/2012">03/02/2012</option>
<option value="03/01/2012">03/01/2012</option>
</select>

<select id='end_date' name='data[eDate]' title='Use the drop list'>
<option value="" selected="selected"> </option>
<option value="03/05/2012">03/05/2012</option>
<option value="03/04/2012">03/04/2012</option>
<option value="03/03/2012">03/03/2012</option>
<option value="03/02/2012">03/02/2012</option>
<option value="03/01/2012">03/01/2012</option>
</select>

---

这里有几个不同的解决方案，包括服务器端。这是一个常见的场景，我相信如果你再多搜索一点，你会在这个网站上找到更多的例子

---

在您的实际示例中，如果两个列表完全相同，那么使用索引就非常简单。看

使用jQuery

$(function(){ //when the page is loaded

$("#start_date").change(function(){ //register a anonymous function that will be called when the element with id=start_date changes his values

    var start = $(this).val(); //gets the value of the element

    $("#end_date option").each(function(i){//for each option of end_date

        if(new Date($(this).val()).getTime() < new Date(start).getTime()){ //if the date of the element is before the start
            $(this).hide(); //hide the element
        }else{
            $(this).show(); //shows the element
        }
    });

});

})

---

我没有测试过，但类似于此

你也在使用服务器端语言吗？好的一点，使用服务器端语言会容易得多。该网站更多的是从各种外部来源获取第二个下拉列表的元素，但是它是有效的。+1在JSFIDLE中非常有效，看起来它正是我所需要的，但是我的实现失败了。是否有其他组件/资源需要我参考？我现在引用的是ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

$(function(){ //when the page is loaded

$("#start_date").change(function(){ //register a anonymous function that will be called when the element with id=start_date changes his values

    var start = $(this).val(); //gets the value of the element

    $("#end_date option").each(function(i){//for each option of end_date

        if(new Date($(this).val()).getTime() < new Date(start).getTime()){ //if the date of the element is before the start
            $(this).hide(); //hide the element
        }else{
            $(this).show(); //shows the element
        }
    });

});