Hierarchie Wählen Sie Liste mit jQuery

Question

Ich versuche, eine ziemlich erweiterte Hierarchie von Dropdown-Optionen zu machen. Ich versuche es so zu machen, dass alle Optionen, die nicht mit der vorherigen Option in Verbindung stehen, ausgeblendet werden. Wenn zum Beispiel Gerätegruppen ausgewählt sind, ist das zweite Dropdown-Menü standardmäßig "Gruppendetails" (aus dem mittleren Dropdown-Menü), und das untere Dropdown-Menü wird ausgeblendet, da es nicht verwendet wird. Wenn ich dann zu den Geräteeinstellungen (oberes Dropdown-Menü) zurückwechsle, wird das mittlere Dropdown-Menü standardmäßig zu Gerätedetails (mittleres Dropdown) und das untere Dropdown-Menü erscheint wieder und zeigt nur Optionen an, die sich auf Gerät und nicht auf Benachrichtigung beziehen.

Hier ist mein 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>

Answer 1

diese hinzufügen vor dem Ende der Änderungsfunktion

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

Diese #bottom selectbox verstecken, wenn der Wert von #top ist " Gruppen ", und zeigen Sie es erneut, wenn Sie eine andere Option auswählen.

Edit: Ansicht #bottom Optionen basierend auf #middle Wert

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