Vier Auswahl-Optionsfelder ändern sich dynamisch bei jeder Auswahlbox-Option

Question

Ich versuche es zu machen, wenn ein Benutzer eine Option in der ersten Auswahlbox auswählt, der Inhalt sich für die zweite Auswahlbox ändert und so weiter. Einschließlich wenn der Benutzer für die ersten und zweiten Auswahloptionen auswählt, ändert er auch, was in der dritten Auswahlbox ist und so weiter. Bei dem, was ich bisher gesehen habe, stoße ich auf einige Probleme. Derzeit funktioniert es, wenn es richtig gemacht wird, dem Fluss jeder Auswahlbox folgend, aber ich habe bemerkt, dass es Möglichkeiten gibt, um es herumzukommen. Gibt es eine Möglichkeit, alle Auswahlfelder bis auf das erste auszublenden, und wenn die erste Option ausgewählt ist, erscheint das zweite Auswahlfeld und so weiter?

Mache ich diesen Weg zu kompliziert? Gibt es einen einfacheren Weg, um dasselbe Ziel zu erreichen? Ich freue mich auf Ihre Antworten.

HTML:

<!-- START OF ADDING LOCATIONS --> 
<select id="select1" class="ad_inquiry_locations" value="" name="guest_pl" required> 

    <option value="" selected disabled>Select primary location</option> 
    <option value="Beloit">Beloit</option> 
    <option value="Concordia">Concordia</option> 
    <option value="Glen-Elder">Glen Elder</option> 
    <option value="Jewell">Jewell</option> 

</select> 

<!-- Start of SECOND GROUP --> 
<select id="select2" class="ad_inquiry_locations" value="" name="guest_al-2"> 

    <option value="" selected disabled>Add a location</option> 
    <option value="Beloit">Beloit</option> 
    <option value="Concordia">Concordia</option> 
    <option value="Glen-Elder">Glen Elder</option> 
    <option value="Jewell">Jewell</option> 

</select> 
<!-- End of SECOND GROUP --> 

<!-- Start of THIRD GROUP --> 
<select id="select3" class="ad_inquiry_locations" value="" name="guest_al-3"> 

    <option value="" selected disabled>Add a location</option> 
    <option value="Beloit">Beloit</option> 
    <option value="Concordia">Concordia</option> 
    <option value="Glen-Elder">Glen Elder</option> 
    <option value="Jewell">Jewell</option> 

</select> 
<!-- End of THIRD GROUP --> 

<!-- Start of FOURTH GROUP --> 
<select id="select4" class="ad_inquiry_locations" value="" name="guest_al-4"> 

    <option value="" selected disabled>Add a location</option> 
    <option value="Beloit">Beloit</option> 
    <option value="Concordia">Concordia</option> 
    <option value="Glen-Elder">Glen Elder</option> 
    <option value="Jewell">Jewell</option> 

</select> 
<!-- End of FOURTH GROUP --> 
<!-- END OF ADDING LOCATIONS --> 

JS:

var Lists = [ 
    document.getElementById("select1"), 
    document.getElementById("select2"), 
    document.getElementById("select3"), 
    document.getElementById("select4") 
    ], 
    nbLists = Lists.length; 


// Binds change events to each list 
for (var iList = 0; iList < nbLists; iList++) { 
    Lists[iList].onchange = RemoveItems(iList); 
} 


function RemoveItems(iList) { 
    return function() { 
    var value = []; 

    // Add the selected items of all previous lists including the one changed 
    for (var jList = 0; jList <= iList; jList++) value.push(Lists[jList].options[Lists[jList].selectedIndex].text); 


    // Hide in all succeeding lists these items 
    for (var kList = iList + 1; kList < nbLists; kList++) 
     HideItems(kList, value); 
    } 
} 


// Hide items selected in previous lists in all next lists 
function HideItems(iList, value) { 
    var nbOptions = Lists[iList].options.length, 
    nbValues = value.length, 
    found; 

    if (nbValues === 0) return; 

    for (var iOption = 0; iOption < nbOptions; iOption++) { 
    // Find if this element is present in the previous lists 
    found = false; 
    for (var iValue = 0; iValue < nbValues; iValue++) { 
     if (Lists[iList].options[iOption].text === value[iValue]) { 
     found = true; 
     break; 
     } 
    } 

    // If found, we hide it 
    if (found) { 
     Lists[iList].options[iOption].style.display = "none"; 
     Lists[iList].options[iOption].selected = ""; 
    } 
    // else we un-hide it (in case it was previously hidden) 
    else 
     Lists[iList].options[iOption].style.display = ""; 
    } 
} 

Answer 1

können Sie CSS verwenden. Verstecken Sie einfach alle Ihre Auswahlen am Anfang (außer Ihrer ersten), indem Sie ihnen eine bestimmte Klasse hinzufügen.

<select id="select2" class="ad_inquiry_locations hide" value="" name="guest_al-2"> ... 

Definieren Sie auch die CSS-Klasse.

.hide { 
    display: none; 
} 

Jetzt können Sie die Klasse entfernen, nachdem Sie eine Option ausgewählt haben, also so. Diese

function RemoveItems(iList) { 
    return function() { 
    Lists[iList + 1].classList.remove('hide'); 
    ... 

ist nur ein Prototyp und führt zu einem Fehler, da Index 3 + 1 nicht vorhanden sind. Passe das an deine Wünsche an. Sie können Ihre Auswahl auch wieder ausblenden, indem Sie einfach die Klasse .hide hinzufügen.

Lists[iList + 1].classList.add('hide'); 
... 

Demo