Показать сообщение отдельно
  #6 (permalink)  
Старый 26.08.2020, 09:48
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Все подробно не буду, а в общем это:

//установка обработчика изменения в форме, собственно делегирование ей обработку событий списков
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.

Последний раз редактировалось laimas, 26.08.2020 в 10:10.
Ответить с цитированием