Select dependence of one another (the choice of age)

Question

Need to do dynamic filtering options , namely age and do.My code jsfiddle.net,but came across a problem that does not work in chrome method hide.Found answers(1, 2) but do not know how to put them in my code.

Problem in:

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

});

score 1 · Accepted Answer · answered May 04 '14 at 20:07

It seems that chrome wont let you simply hide option tags. You may have to resort to dynamically filling the from options after you select the to option. I've updated your jQuery code below to allow passing a range of numbers in:

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

I'm not entirely sure about performance on this, but as I've removed the .each() for going through the select options to hide them, it may still perform well.

updated working fiddle here:

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

Select dependence of one another (the choice of age)

1 Answers1