Question

我有两个下拉列表，这些列表是从存储在数据库中的相同日期数组中填充的。我想使用javascript或jquery根据第一个列表中的选择更改第二个下拉列表。例如，如果用户在第一个开始日期列表中选择03/03/2012，那么我希望第二个列表仅显示或允许数组中的未来日期。 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>

Answer 1

根据您的实际示例，如果两个列表完全相同，那么如果您使用index()则非常简单。看http://jsfiddle.net/elclanrs/7YrqY/

$('#start_date').change(function(){
    var $selected = $(this).find('option:selected');
    $('#end_date')
        .find('option')
        .prop('disabled', false)
        .eq($selected.index()-1)
        .nextAll()
        .prop('disabled', true);
});

Answer 2

这里有一些不同的解决方案，包括服务器端。这是一种常见的情况，如果您再搜索一下，我相信您可以在此网站上找到更多示例。

http://css-tricks.com/dynamic-dropdowns/

Answer 3

使用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
        }
    });

});

}）;

我没有经过测试但是有类似的东西

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

3 个答案: