CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menurange
Bouke
Bouke

Reputation: 660

Restricting range of drop-down lists

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"]');
});

Upvotes: 1

Views: 2663

Answers (4)

Bouke
Bouke

Reputation: 660

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

Upvotes: 1

Raman Chodźka
Raman Chodźka

Reputation: 558

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

Upvotes: 2

zozo
zozo

Reputation: 8602

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.

Upvotes: 0

Bill&#39;o
Bill&#39;o

Reputation: 514

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

Upvotes: 0

Related Questions