Четыре окна с возможностью выбора динамически изменяются при каждом выборе окна выбора

Question

Я пытаюсь сделать это, если пользователь выбирает опцию в первом поле выбора, содержимое будет изменяться для второго блока выбора и так далее. Включая, если пользователь выбирает для первого и второго вариантов выбора, он также меняет то, что находится в третьем поле выбора и так далее. Однако, с тем, что у меня есть, я сталкиваюсь с некоторыми проблемами. В настоящее время он работает, если все сделано правильно, следуя потоку каждого окна выбора, но я заметил, что есть способы по-прежнему обойти его. Есть ли способ скрыть все поля выбора, кроме первого, и когда выбран первый параметр, появится второе поле выбора и так далее?

Я делаю этот способ сложным? Есть ли более простой способ достичь этой же цели? Я с нетерпением жду ваших ответов.

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

Вы можете использовать CSS. Просто скройте все ваши выборы в начале (кроме вашего первого), просто добавив к ним определенный класс.

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

Также определите класс CSS.

.hide { 
    display: none; 
} 

Теперь вы можете удалить класс после выбора опции, т. Е. Так.

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

Это всего лишь прототип и приведет к ошибке, поскольку индекс 3 + 1 не будет существовать. Поэтому настройте это на свои желания. Вы также можете скрыть свой выбор, просто добавив класс .hide.

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

Demo