Спасибо за такое подробное объяснение. НО всё же... Допустим есть таблица "оборудование". В ней есть много колонок, нас интересуют только две: "Тип" и "Описание". Тип имеет моно-выбор, Описание - мульти. Код, который вы помогли мне составить выше - работает. Но заносит в колонку "Описание" только последний выбранный элемент, хотя я выбираю несколько. Как это исправить? Не на теории, а на практике, сам я не дойду
<style>
.second {
display: none;
}
</style>
<form id="myForm">
<select id="Dest" class="Validate_Required " name="Dest" aria-required="true">
<option value="" disabled="" selected="selected">-</option>
<option value="1">Оборудование 1</option>
<option value="2">Оборудование 2</option>
<option value="3">Оборудование 3</option>
<option value="4">Оборудование 4</option>
</select>
<select class="second" size="3" multiple>
<option value="0">1.1 текст</option>
<option value="1">1.2 текст</option>
<option value="2">1.3 текст</option>
</select>
<select class="second" size="3" multiple>
<option value="0">2.1 текст</option>
<option value="1">2.2 текст</option>
<option value="2">2.3 текст</option>
</select>
<select class="second" size="3" multiple>
<option value="0">3.1 текст</option>
<option value="1">3.2 текст</option>
<option value="2">3.3 текст</option>
</select>
<select class="second" size="3" multiple>
<option value="0">4.1 текст</option>
<option value="1">4.2 текст</option>
<option value="2">4.3 текст</option>
</select>
</form>
<div id="selection"></div>
<script>
document.getElementById('myForm').addEventListener('change', function(e) {
let elm = [...e.currentTarget.elements],
prt = elm[0].selectedIndex,
set = 'Вы выбрали: ' + elm[0].options[prt].text;
elm.slice(1).forEach(function(e, i) {
e.style.display = i == prt - 1 ? 'block' : 'none'
});
[...elm[prt].options].forEach(function(e) {
if(e.selected) set += '; ' + e.text
});
document.getElementById('selection').textContent = set;
});
</script>