Quatre cases d'option de sélection changent dynamiquement à chaque option de boîte de sélection

Question

J'essaye de faire en sorte que si un utilisateur sélectionne une option sur la première boîte de sélection, le contenu changera pour la deuxième boîte de sélection et ainsi de suite. Y compris si tout ce que l'utilisateur sélectionne pour les première et deuxième options de sélection, il change aussi ce qui est dans la troisième boîte de sélection et ainsi de suite. Cependant, avec ce que j'ai jusqu'ici, je rencontre quelques problèmes. Actuellement, cela fonctionne si c'est fait correctement, en suivant le flux de chaque boîte de sélection, mais j'ai remarqué qu'il existe des moyens de contourner le problème. Est-il possible de masquer toutes les cases de sélection à l'exception du premier, et lorsque la première option est sélectionnée, la deuxième boîte de sélection apparaît et ainsi de suite?

Est-ce que je fais de cette façon compliquée? Y a-t-il un moyen plus facile d'accomplir ce même objectif? J'attends vos réponses avec impatience.

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

Vous pouvez utiliser les CSS. Il suffit de masquer toutes vos sélections au début (à l'exception de votre 1er) en leur ajoutant une classe spécifique.

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

Définissez également la classe CSS.

.hide { 
    display: none; 
} 

Maintenant, vous pouvez supprimer la classe après avoir sélectionné une option, c'est-à-dire comme cela.

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

Ceci est juste un prototype et conduira à une erreur puisque l'index 3 + 1 n'existera pas. Alors ajustez cela à vos désirs. Vous pouvez également masquer vos sélections en ajoutant simplement la classe .hide.

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

Demo