Restricting range of drop-down lists

Question

I have two drop-down lists in HTML looking (simplified) like this:

<select name="from" id="abs-from-1">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

<select name="to" id="abs-to-1">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

I would like to restrict these inputs so that when a user selects "Three" in the first drop-down list, the values "One" and "Two" get completely removed (or disabled) in the second drop-down list and vice versa: when a user selects "Four" in the second drop-down, I would like to have "Five" removed from the first drop-down. (Kinda like a range-slider)

I know this should be possible with a little jQuery code but could anyone explain how?

Edit:

Added a little jQuery code I've played around with, I can select the current value and get the next drop-down element. But how can I disable the values of the "To" that are smaller then the current value in the "From" element, and vice versa.

$('[name="from"]').on("change", function() {
    var currentVal = $(this).attr('value');
    var toElem = $(this).next('[name="to"]');
});

@MohammadAreebSiddiqui The "real" drop-down lists in my code have `name` attributes so I can select them in jQuery. I've tried the onChange myself before and I can get the selected value from that but what I can't get to work is removing the values (that are bigger, or smaller) from the other drop-down list.... — Bouke, Jul 10 '13 at 15:04
@MohammadAreebSiddiqui I've updated the code a little bit (added name and id attributes), but the real code doesn't differ that much from this simplified code. — Bouke, Jul 10 '13 at 15:22
I was talking about your jQuery, what have you tried creating that uptill? We are here to help not to make your projects? — Mohammad Areeb Siddiqui, Jul 10 '13 at 15:23

Raman Chodźka · Answer 1 · 2013-07-10T15:51:53.247

Did not manage to do this with little code. That's what I've done.

var from = $('#abs-from-1');
var to = $('#abs-to-1');

from.change(function () {
    var selectedValue = parseInt($(this).val());
    to.find('option').prop('disabled', false).filter(function () {
        return parseInt(this.value) < selectedValue;
    }).prop('disabled', true);
});

to.change(function () {
    var selectedValue = parseInt($(this).val());
    from.find('option').prop('disabled', false).filter(function () {
        return parseInt(this.value) > selectedValue;
    }).prop('disabled', true);
});

Update: Using ordinal index of option tags can also be an option. Here's another fiddle.

var from = $('#abs-from-1');
var to = $('#abs-to-1');

from.change(function () {
    var selectedIndex = this.selectedIndex;
    to.find('option').prop('disabled', false).filter(function (index) {
        return index < selectedIndex;
    }).prop('disabled', true);
});

to.change(function () {
    var selectedIndex = this.selectedIndex;
    from.find('option').prop('disabled', false).filter(function (index) {
        return index > selectedIndex;
    }).prop('disabled', true);
});

Bouke · Accepted Answer · 2013-07-11T11:45:28.517

I've changed the code suggested by Raman Chodźka a little bit so it doesn't rely on the ID's anymore and I can use multiple of these drop-down lists on one page.

This is what I've done (jsFiddle):

$('[name="from"],[name="to"]').change(function () {
    var e = $(this);
    var val = parseInt($(this).val());
    e.siblings('[name="from"],[name="to"]').find('option').prop('disabled', false).filter(function () {
    return ((e.attr('name') == 'from') ? parseInt(this.value) < val : parseInt(this.value) > val);
    }).prop('disabled', true);
});

score 0 · Answer 3 · edited May 23 '17 at 12:05

You have to add an onChange (on modern browsers works with onClick on options also but I still suggest onChange) event on your selects that calls a js function which does something like what the guys answered here: jQuery remove options from select

I suggest adding some ids to selects, to add event listener you can do something like $('#idSelect1').change(function() {bla bla})

Or you can add event directly in yout html.

score 0 · Answer 4 · edited Jul 10 '13 at 14:58

0

Guess you're looking for a dynamic select list: http://css-tricks.com/dynamic-dropdowns/

edited Jul 10 '13 at 14:58

Mohammad Areeb Siddiqui

9,795
14
71
113

answered Jul 10 '13 at 14:57

Bill'o

514
1
5
19

I guess a Dynamic Select List would work, but it seems a little "overkill" for a list with just numeric values, right? – Bouke Jul 10 '13 at 15:05
yea sure, I just meant the spirit on the method by using the onChange jquery event and then playing on hidding/disabling the leftover options ;) – Bill'o Jul 10 '13 at 15:17

Restricting range of drop-down lists

4 Answers4

Linked