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, Jul 28 '16 at 11:01
How to link first list `values` with second list `data-group` ? — GeoGyro, Jul 28 '16 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, Jul 28 '16 at 13:23
Possible duplicate of [How to populate a cascading Dropdown with JQuery](http://stackoverflow.com/questions/18351921/how-to-populate-a-cascading-dropdown-with-jquery) — Sunny Patel, Jul 28 '16 at 13:40
Indeed, thanks. Data is not organized similary but interresting way. — GeoGyro, Jul 28 '16 at 13:44

kalsowerus · Accepted Answer · 2016-07-28T13:29:42.813

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 '16 at 13:29

answered Jul 28 '16 at 11:07

kalsowerus

998
8
23

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. – GeoGyro Jul 28 '16 at 12:10
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? – kalsowerus Jul 28 '16 at 12:51
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 Jul 28 '16 at 13:01
It's okay, I make like this [post](http://stackoverflow.com/questions/18351921/how-to-populate-a-cascading-dropdown-with-jquery), last comment. Thanks for your help, you drive me in the good way. – GeoGyro Jul 28 '16 at 14:01

Nested dropdown lists : depending values

1 Answers1