simultaneous date updates

by stofke

HTML

<form action="/admin/schoolyears/2" method="post">
    <label for="schoolyear-startdate-year">
        <select id="schoolyear-startdate-year" name="schoolyear[startdate]($year)">
            <option value="2012">2012</option>
            <option selected="selected" value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
            <option value="2016">2016</option>
            <option value="2017">2017</option>
        </select>
    </label>
    <label for="schoolyear-enddate-year">
        <select id="schoolyear-enddate-year" name="schoolyear[enddate]($year)">
            <option value="2013">2013</option><option selected="selected" value="2014">2014</option>
            <option value="2015">2015</option><option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
    </select>
 </label>
<input type="hidden" name="_method" value="put">
<input class="btn" type="submit" value="Save changes">
</form>

JavaScript

$("select:first").bind("change", function() { 
       nextYear = parseInt($(this).attr('value'))+1;
   $("select:last").val(nextYear) ;   
});
$("select:last").bind("change", function() { 
       previousYear = parseInt($(this).attr('value'))-1;
   $("select:first").val(previousYear) ;   
});