Javascript下拉菜单的年份间隔

时间:2013-11-23 20:57:26

标签: javascript jquery javascript-events drop-down-menu

我有两个下拉菜单,用于设置sql查询的年份间隔。这些下拉菜单也使用sql查询填充。我让他们都工作,但我想改进我的设计。当我从第一个下拉菜单中选择一年时,第二个菜单中填入年份值> =到第一个框(如果我选择1991,第二个菜单将包含1991年,1992年......等等。但是,当我从第一个下拉框中选择一个新值,第二个下载重置。如果我回到第一个下拉框并选择一个小于第二个框中选择的年份,我想将它放在哪里,价值不会重置。我有办法做到吗?

$(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>");
    }
});
});

1 个答案:

答案 0 :(得分:0)

$(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