Все подробно не буду, а в общем это:
//установка обработчика изменения в форме, собственно делегирование ей обработку событий списков
document.getElementById('myForm').addEventListener('change', function(e) {
let elm = [...e.currentTarget.elements], //массив элементов формы, а это только списки
prt = elm[0].selectedIndex, //первый элемент этого массива, это список Dest, получаем индекс выбранной в нем опции
set = 'Вы выбрали: ' + elm[0].options[prt].text; //получаем текст выбранной опции списка Dest
//если источник события это список Dest, отобразим зависимый список из вторичных списков (second)
//для этого обходим в цикле их, а это срез массива элементов начиная со второго
if(e.target == elm[0]) elm.slice(1).forEach(function(e, i) {
//если индекс списка second равен индексу выбранной опции списка Dest минус единица,
//то показываем список, иначе скрываем список
e.style.display = i == prt - 1 ? 'block' : 'none'
});
//опции списка second, чей индекс в наборе элементов формы равен индексу выбранной опции списка Dest обходим в цикле
[...elm[prt].options].forEach(function(e) {
//если опция выбрана, то добавляем ее текст к тексту выбранной опции списка Dest
if(e.selected) set += '; ' + e.text
});
document.getElementById('selection').textContent = set; //отображаем выбор
});
В данном примере класс second не является селектором для выбора элементов поэтому видимостью списков можно управлять удалением/добавлением этого класса списку, то есть:
//вместо
e.style.display = i == prt - 1 ? 'block' : 'none'
//поступать так
e.classList.toggle('second', i != prt-1)
Не известно для чего это, но ранее выбранные опции в списках second не сбрасываются при изменениях в списке Dest.