Здравствуйте.
Есть пункт "Оборудование 1,2,3,4...". В каждом пункте, есть свои подпункты с множественным выбором, которые появляются после выбора основного.
Требуется вывести в отображение полный список выбранных данных (основной пункт "Оборудование 1-4" + все выбранные к нему подпункты).
Реализовать вывод данных, например, после нажатия на кнопку "показать". Либо, как у меня, без кнопки. В данный момент выводится в зависимости от выбора Оборудование 1-4, а вот подпункт выводится только для первого основного Оборудование 1. Должно получится так: "Вы выбрали: Оборудование 1; 1.1 текст; 1.3 текст" Подскажите пожалуйста..
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<form name="myForm">
<select id="Dest" class="Validate_Required " name="Dest" aria-required="true" onChange="Selected(this)">
<p><option value="0" selected="selected">-</option>
<option value="1">1 Оборудование</option>
<option value="2">2 Оборудование</option>
<option value="3">3 Оборудование</option>
<option value="4">4 Оборудование</option>
</select></p>
</form>
<form name="myForms">
<select id='Label1' style='display: none;' size="3" multiple></p>
<option value="0">1.1 текст</option>
<option value="1">1.2 текст</option>
<option value="2">1.3 текст</option>
</select>
</div>
<select id='Label2' style='display: none;' size="3" multiple>
<option value="0">2.1 текст</option>
<option value="1">2.2 текст</option>
<option value="2">2.3 текст</option>
</div>
</select>
</div>
<select id='Label3' style='display: none;' size="3" multiple>
<option value="0">3.1 текст</option>
<option value="1">3.2 текст</option>
<option value="2">3.3 текст</option>
</div>
</select>
<select id='Label4' style='display: none;' size="3" multiple>
<option value="0">4.1 текст</option>
<option value="1">4.2 текст</option>
<option value="2">4.3 текст</option>
</div>
</select>
</form>
<div id="selection"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="app2.js"></script>
</body>
</html>
JS:
function Selected(a) {
var label = a.value;
if (label==1) {
document.getElementById("Label1").style.display='block';
document.getElementById("Label2").style.display='none';
document.getElementById("Label3").style.display='none';
document.getElementById("Label4").style.display='none';
} else if (label==2) {
document.getElementById("Label1").style.display='none';
document.getElementById("Label2").style.display='block';
document.getElementById("Label3").style.display='none';
document.getElementById("Label4").style.display='none';
} else if (label==3) {
document.getElementById("Label1").style.display='none';
document.getElementById("Label2").style.display='none';
document.getElementById("Label3").style.display='block';
document.getElementById("Label4").style.display='none';
} else if (label==4) {
document.getElementById("Label1").style.display='none';
document.getElementById("Label2").style.display='none';
document.getElementById("Label3").style.display='none';
document.getElementById("Label4").style.display='block';
} else {
document.getElementById("Label1").style.display='none';
document.getElementById("Label2").style.display='none';
document.getElementById("Label3").style.display='none';
document.getElementById("Label4").style.display='none';
}
}
var mySelect = myForm.Dest;
var mySelects = myForms.Label1;
var mySelectss = myForms.Dest3;
var mySelectsss = myForms.Dest4;
var mySelectssss = myForms.Dest5;
function changeOption(){
var selection = document.getElementById("selection");
var selectedOption = mySelect.options[mySelect.selectedIndex];
var selectedOptions = mySelects.options[mySelects.selectedIndex];
selection.textContent = "Вы выбрали: " + selectedOption.text + ";" + " " + selectedOptions.text;
console.log(selection.textContent)
}
mySelect.addEventListener("change", changeOption);