javascript - 选择彼此的依赖(年龄的选择)

Question

需要做动态过滤选项，即age和do。我的代码jsfiddle.net ，但遇到了一个在 chrome 方法 hide 中不起作用的问题。找到答案( 1 ， 2 )但不知道如何将它们放入我的代码中。

问题在:

$("#age_from").change(function(){
$("#age_to option").each(function(i) {
    if(parseInt($("#age_from").val()) > parseInt($(this).val())) {
        $(this).hide();
    }
    else {
        $(this).show();
    }
});

});

Answer 1

看来 chrome 不会让你简单地隐藏 option 标签。选择 to 选项后，您可能不得不求助于动态填充 from 选项。我已经在下面更新了您的 jQuery 代码，以允许在以下位置传递一系列数字:

function fill(element, range_start, range_end){   

    if(typeof range_start == 'undefined') {

        range_start = 1;
    }

    if(typeof range_end == 'undefined') {

        range_end = 100;
    }

    // STORE THE PREVIOUSLY SELECTED VALUE
    var selected = element.val();

    // RESET THE HTML OF THE ELEMENT TO THE FIRST OPTION ONLY
    element.html(element.find('option').first());

    var age_list = [];
    for (var i = range_start; i < range_end; i++){
       age_list.push(i);
    }

    $.each(age_list, function(key, value) {
        $(element)
                 .append($("<option></option>")
                 .attr("value", value)
                 .text(value));
        });

    // RESET THE VALUE
    element.val(selected);
}

fill($('#age_from'));
fill($('#age_to'));

$("#age_from").change(function(){

    // FILL THE SELECT ELEMENT WITH NUMBERS FROM THE RANGE #age_from.val() + 1 TO 100
    fill($('#age_to'), parseInt($("#age_from").val()) + 1, 100);
});

$("#age_to").change(function(){

    // FILL THE SELECT ELEMENT WITH NUMBERS FROM THE RANGE 1 TO #age_to.val()
    fill($('#age_from'), 1, parseInt($("#age_to").val()));
});

我不完全确定这方面的性能，但由于我删除了 .each() 以通过选择选项隐藏它们，它可能仍然表现良好。

在这里更新了工作 fiddle :

http://jsfiddle.net/andyface/GKVxu/1/