Question

I have two drop-down lists populated from an array of same dates stored in a database. I want to use javascript or jquery to change the second drop-down list based on the selection from the first list. So an example would be if the user selects 03/03/2012 in the first, start date list, then I’d like the second list to only show or allow future dates within the array. 3/3, 3/2 and 3/1 would either be greyed out or removed and 3/4, 3/5 would remain as selectable options. Can anyone help with the javascript coding or make another recommendation?

<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

With your actual example, if the two lists are exactly the same then it’s pretty simple if you work with index(). Look 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);
});