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

Question

我有两个下拉列表，它们是从数据库中存储的一组相同日期填充的。我想使用 javascript 或 jquery 根据第一个列表中的选择更改第二个下拉列表。因此，一个例子是，如果用户在第一个开始日期列表中选择 03/03/2012，那么我希望第二个列表仅显示或允许数组中的 future 日期。 3/3、3/2 和 3/1 将变灰或删除，而 3/4、3/5 将保留为 optional 。任何人都可以帮助编写 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);
});