Two dropdowns with non-identical options that restrict each other

Question

I have two dropdowns with non-identical options but the same number of options. Using javascript (and jQuery 1.11.1) I need either dropdown to restrict (by disabling, not hiding) the options available in the other dropdown to the next option and below.

I.E:

<select id="dropdown1">
    <option value="0">option1_1</option> **
    <option value="0">option1_2</option> **
    <option value="1">option1_3</option> **DISABLED**
    <option value="2">option1_4</option> **DISABLED**
    <option value="3">option1_5</option> **DISABLED**
</select>

<select id="dropdown2">
    <option value="0">option2_1</option> **DISABLED**
    <option value="0">option2_2</option> **DISABLED**
    <option value="0">option2_3</option> **
    <option value="1">option2_4</option> **
    <option value="2">option2_5</option> **
</select>

If option 2 in dropdown1 is selected, options 1 & 2 of dropdown2 are disabled and only the remaining options are available in dropdown2 and the unused options in dropdown1 would also be disabled. Dropdown2 would control dropdown1 in the same way if the initial choice was made in dropdown2.

Any help would be appreciated.

Sorry, I didn't specify that at time of writing I hadn't tried anything because I was stuck on how to start (i'm a novice). But, I just found this question [link]http://stackoverflow.com/questions/17573893/restricting-range-of-drop-down-lists the answer to which does what I'm after except that after selecting one option in one list the first remaining option in the other list is the equivalent option. I need the equivalent option to be disabled with the next option after that as the start of the available options. — DDA, Jan 18 '16 at 05:04

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

You can achieve the requirement by using disable property.

Here is the Fiddle.

$("select#dropdown1 option[value*='1'],select#dropdown1 option[value*='2'],select#dropdown1 option[value*='3'],select#dropdown2 option[value*='0']").prop('disabled',true);

Hope this solves your problem.

-Help :)

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 18 '16 at 04:30

Help

1,156
7
11

Jobelle · Accepted Answer · 2016-01-18T04:54:06.420

0

 $(document).ready(function () {
        var index;
        $('#dropdown1').change(function ()
            {
            $('#dropdown2 option').removeAttr('disabled');
            index = $(this).find('option:selected').index() + 1;
            $('#dropdown2').find("option:lt(" + index + ")").prop("disabled", true);

            $('#dropdown1').find("option:gt(" + $(this).find('option:selected').index() + ")").prop("disabled", true);
            index = index -1;
            $('#dropdown1').find("option:lt(" + index + ")").prop("disabled", true);
            });
    });

edited Jan 18 '16 at 04:54

answered Jan 18 '16 at 04:44

Jobelle

2,717
1
15
26

Thanks @Shriya R. Though I do need dropdown2 to also control dropdown1 so I modded your code to include control from dropdown2 to dropdown1 by duplicating the change function and swapping the dropdown names and that seems to work. – DDA Jan 18 '16 at 05:27
didnt notice that the change u want in dropdown2 :). u got it? – Jobelle Jan 18 '16 at 05:31

Two dropdowns with non-identical options that restrict each other

2 Answers2