Good day.

There are two drop-down lists with numbers from 18 to 90 - "age from" and "age to" for the filter.

How to do to prohibit the choice of "age from" more than "age to" and, conversely, "age to" should not be less than "age from".

How to hide unnecessary numbers?

Thank.

  • @ Roman Rakzin, If you are given an exhaustive answer, mark it as correct (click on the check mark next to the selected answer). - Vitalina

3 answers 3

If in a hurry, then I would do something like this :

var ageRange = $('.age_range'); ageRange.on('change', function(){ var $that = $(this), id = this.id, $other = ageRange.not($that), method = (id == 'from' ? 'prevAll' : 'nextAll'), indx = $that.prop('selectedIndex'); $('option', $other).prop('disabled', false); $('option:eq(' + (indx + (id == 'from' ? 1 : -1)) + ')', $other) .prop('selected', true) [method]() .prop('disabled', true); });

    I would assign them each ID, if possible, hung on the change handler for both controllers, and checking their values ​​would block the other options.

    http://jsfiddle.net/mmL5m2me/

      Something like that:

       $('#from').on('change', function() { var val = new Number($('#from :selected').text()); var found = false; $('#to option').each( function(index, item) { if($(item).text() < val) { $(item).attr('disabled', true); } else { $(item).removeAttr('disabled'); if(!found) { found = true; if(new Number($('#to :selected').text()) < $(item).text()) $('#to option:eq(' + index + ')').prop('selected', true); } } }); })

      An example . For the second - by analogy