Nested dropdown lists : depending values

Question

I have two dropdown lists with values. When I select a value in the first, I want to return elements with the same selected value in the second. The second list depending of the first's list selection. How could I do this ?

<div class="form-group">
    <label for="first">First list</label>
        <select id="first" class="form-control" role="listbox" onchange="filterList();">
            <option value="Select level 1" selected="selected">Select...</option>
            <option value="Option 1">Option 1</option>
            <option value="Option 2">Option 2</option>
        </select>
</div>
<div class="form-group">
    <label for="second">Second list</label>
        <select id="second" class="form-control" role="listbox">
            <option value="Select level 2" data-group="Select" selected="selected">Select...</option>
            <option value="Option 1 - 1" data-group="Option 1">First list 1 - Element 1</option>
            <option value="Option 1 - 2" data-group="Option 1">First list 1 - Element 2</option>
            <option value="Option 2 - 1" data-group="Option 2">First list 2 - Element 1</option>
            <option value="Option 2 - 2" data-group="Option 2">First list 2 - Element 2</option>
        </select>
</div>

jQuery script

function filterList(){

    var first = $("#first").find('option:selected').text(); // stores first list selected elements

    $("#option-container").children().appendTo("#second"); // moves <option> contained in #option-container back to their <select>

    var toMove = $("#second").children("[data-group!='"+first+"']"); // selects elements to move out

    toMove.appendTo("#option-container"); // moves elements in #option-container

    $("#second").removeAttr("disabled"); // enables select
};

First, don't use value for this purpose in the second select. You won't be able to determine which option has been selected in the second dropdown otherwise. — kalsowerus
– kalsowerus, Commented Jul 28, 2016 at 11:01
I see you updated your <option>s, and I'm sorry if I have confused you. But what I was trying to say is that you should probably keep your values unique, because when reading the value of a <select>, the value` of the selected <option> is returned. Thus the value-attribute will be your only way of distinguishing your <option>s. I would suggest you use an attribute called data-group to connect the <option>s of your second dropdown to the values of your first one. — kalsowerus
– kalsowerus, Commented Jul 28, 2016 at 12:44
How to link first list values with second list data-group ? — GeoGyro
– GeoGyro, Commented Jul 28, 2016 at 13:09
Yep just like you did, that way you see which options of the second dropdown need to be shown if which of option is selected in the first. But because you will probably later work with the result of your second dropdown, each option there requires a unique value. — kalsowerus
– kalsowerus, Commented Jul 28, 2016 at 13:23
Possible duplicate of How to populate a cascading Dropdown with JQuery — Sunny Patel
– Sunny Patel, Commented Jul 28, 2016 at 13:40

kalsowerus · Accepted Answer · 2016-07-28 13:29:42Z

2

You can hide an option by setting their css-property display to none, which is what jQuery's $.hide() function does. Or you can set the disabled-attribute on the element ($.attr('disabled', 'disabled')) to just make an option unselectable.

EDIT

A small example of what you could do (though I haven't tested it):

$('#first').change(function() {
    var value = $(this).val();
    $('#second').children().attr('disabled', 'disabled');
    $('#second').children('[data-group=' + value + ']').removeAttr('disabled');
});

This will each time something in the first dropdown is selected, disable all options in the second dropdown and re-enable all options in the second dropdown with a data-group-attribute corresponding to the selected value from the first dropdown.

edited Jul 28, 2016 at 13:29

answered Jul 28, 2016 at 11:07

kalsowerus

1,0089 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

GeoGyro Over a year ago

I have found a script that defined multilevel dependent dropdown lists, I have updated my post. My problem : it's limited to a four list because of generateOptions but not with my second list.

kalsowerus Over a year ago

The page you have linked does not give much information. I don't really understand what that script does and how you want to connect it to your problem. You never mentioned you will need to generate options on the go. Can you explain more precisely what you want and how you are trying to use the script shown in your post?

GeoGyro Over a year ago

Sorry, it's not clear and a bit different: this example is just showing how multiple lists can be linked. In my case I want 2 lists : the first contains multiples values, easy. The second is defined by the first's list selection and only return values of the first list same values. It's a two-time selection.

GeoGyro Over a year ago

It's okay, I make like this post, last comment. Thanks for your help, you drive me in the good way.

Collectives™ on Stack Overflow

Nested dropdown lists : depending values

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related