Hierarchy Select List using jQuery

Question

I'm trying to make a fairly advanced hierarchy of drop down options. I'm attempting to make it so any options that aren't related to the previous option chosen, will be hidden. For an example, when Device Groups is chosen, the second dropdown will be "Group Details" (from the middle dropdown) by default, and the bottom dropdown will disappear since it wont be used. Then when I switch back to Device Settings (top dropdown) the middle dropdown will default to Device Details (middle dropdown) and the bottom dropdown will reappear and only show options related to Device and not Notification.

Here's my code,

/* global $ */
$(document).ready(function(){
    $( "#top" ).change(function() {
      var value = $(this).val();
        $("#middle").prop("disabled", false);
        $("#middle > option").hide();
        $("#middle > option[value*='" + value +"']").show();
        $("#bottom").prop("disabled", false);
        $("#bottom > option").hide();
        $("#bottom > option[value*='" + value +"']").show();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <select id="top" class="top">
        <option value="Settings">Device Settings</option>
        <option value="Groups">Device Groups</option>
    </select>

    <br /><br />

    <select id="middle" class="middle">
        <option value="Settings--Details">Device Details</option>
        <option value="Settings--Notification">Notification List</option>
        <option value="Settings--Digital">Digital Inputs</option>
        <option value="Settings--Analog">Analog Inputs</option>
        <option value="Settings--DigitalO">Digital Outputs</option>
        <option value="Settings--Geofencing">Geofencing</option>
        <option value="Settings--Application">Application Specific</option>
        <option value="Groups--GroupDe">Group Details</option>
    </select>

    <br /><br />

    <select id="bottom" class="bottom">
        <option value="Settings--Details--BasicInfo">Basic Info</option>
        <option value="Settings--Details--SiteDetails">Site Details</option>
        <option value="Settings--Notification--Add">Add or Edit</option>
        <option value="Settings--Notification--Import">Import Notification List</option>
        <option value="Settings--Digital--Displayed">Show Displayed Only</option>
        <option value="Settings--Digital--All">Show All</option>
    </select>
</div>

3rd dropdown option will show based on the value of 2nd dropdown. Is it right ? — Sagar Jajoriya
– Sagar Jajoriya, Commented May 23, 2017 at 17:11
Third dropdown will show/hide based on first dropdown, my bad. Which is answered below. — J. Doe43
– J. Doe43, Commented May 23, 2017 at 17:50

Louay Hamada · Accepted Answer · 2017-05-23 18:32:15Z

2

Add this before the end of Change function

if (value == "Groups") {
    $("#bottom").hide();
} else { $("#bottom").show(); }

This will hide #bottom selectbox when the value of #top is "Groups", and show it again when select any another option.

Edit: View #bottom options based on #middle value

$("#middle").change(function() {
    var middle = $(this).val();
    $("#bottom > option").hide();
    $("#bottom > option[value*='" + middle +"']").show();
});

edited May 23, 2017 at 18:32

answered May 23, 2017 at 17:13

Louay Hamada

7711 gold badge15 silver badges24 bronze badges

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

2 Comments

J. Doe43 Over a year ago

Thanks! But what about hiding values in the third dropdown based off of whats selected in the second? So if the second dropdown is on "Device Details", the third dropdown will only show "Basic Info" and "Site Details". Then when I change the second dropdown to "Notification List" the third dropdown will only have "Add or Edit" and "Import Notification List".

Louay Hamada Over a year ago

You need to do this with middle on change function, I edited my answer with required code

Collectives™ on Stack Overflow

Hierarchy Select List using jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related