Question

需要做动态过滤选项，即年龄和做。我的代码jsfiddle.net，但遇到了一个在chrome方法中无效的问题hide.Found答案（1，{{3} }）但不知道如何将它们放在我的代码中。

问题在于：

$("#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（）以通过选择选项来隐藏它们，它仍然可以表现良好。

在这里更新了工作小提琴：

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

选择彼此的依赖性（年龄的选择）

1 个答案: