年份间隔的 Javascript 下拉菜单

Question

I have two drop down menus that are used to set up year intervals for an SQL query. These drop down menus are populated using an SQL query as well. I have them both working, but I would like to improve on my design. When I select a year from the first drop down menu, the second menu is populated with year values >= to the first box (If I select 1991, the second menu will contain 1991, 1992, ... etc. However, when I select a new value from the first drop down box, the second one resets. I would like to have it where if I go back to the first drop down box and select a year that is less than the one selected in the second box, the values won't reset. Is there a way I can do that?

$(document).ready(function () {
$("#first").change(function () {
    var val = $("#first option:selected").html();
    $("#second").html("");
    var d = new Date();
    var n = d.getFullYear();

    for (i = val; i <= n; i++) {
        $("#second").append("<option>" + i + "</option>");
    }
});
});

Answer 1

$(document).ready(function () {
    $("#first").change(function () {
        var val  = $("#first option:selected").html(),
            val2 = $("#second").val(),
            d    = new Date(),
            n    = d.getFullYear(),
            y    = [];

        for (i = val; i <= n; i++) {
            y.push( $("<option />", {text: i, value:i}) );
        }

        $("#second").html(y).val(function() {
            return $('option[value="'+val2+'"]', this).length ? val2 : '';
        });
    });
});

FIDDLE