How can I make sure that select does not conflict when displaying identical blocks?
There are 2 selectors, with identical options and parameters. Each option outputs a new set of images (blocky). In order for each of the options to display a unique set of images, and not be summed up with the previous one, each of the options is cleaned of the old ones before displaying the image. From there, the question is, how to make the second select not clean the old one, but clean only its own images? At the same time, it is impossible to create a copy of the blocks of the first select and output them separately, because then, when selecting the same options, the images will be in a double copy.
(Есть 2 селекта, с идентичными опциями и параметрами. Каждая опция выводит новый набор изображений(блочных). Для того чтобы каждая из опций выводила уникальный набор изображений, а не суммировалась с предыдущей в каждом из вариантов перед выводом изображение идет очистка от старых. Оттуда и вопрос, как сделать так, чтобы второй селект, не очищал старый, а чистил только свои изображения? При этом, невозможно создать копию блоков первого селекта и выводить их отдельно, тк тогда при выборе одинаковых опций изображения будут в двойном экземпляре.)
var select1 = document.getElementById('101');
var select2 = document.getElementById('102');
select1.addEventListener("change", setCont);
select2.addEventListener("change", setCont2);
function setCont(){
var choice = select1.value;
if(choice === "0"){
let a=1
while(a<=76){
let char = document.getElementById(a);
char.style.display = 'none';
a++
}
}
else if(choice === "1"){
let a=1
while(a<=76){
let char = document.getElementById(a);
char.style.display = 'none';
a++
}
let char = document.getElementById('1');
let char2 = document.getElementById('2');
char.style.display = 'flex';
char2.style.display = 'flex';
}
else if(choice === "2"){
let a=1
while(a<=76){
let char = document.getElementById(a);
char.style.display = 'none';
a++
}
let char = document.getElementById('3');
let char3 = document.getElementById('4');
let char4 = document.getElementById('7');
char.style.display = 'flex';
char3.style.display = 'flex';
char4.style.display = 'flex';
}
}
function setCont2(){
var choice = select2.value;
if(choice === "0"){
let a=1
while(a<=76){
let char = document.getElementById(a);
char.style.display = 'none';
a++
}
}
else if(choice === "1"){
let a=1
while(a<=76){
let char = document.getElementById(a);
char.style.display = 'none';
a++
}
let char = document.getElementById('1');
let char2 = document.getElementById('2');
char.style.display = 'flex';
char2.style.display = 'flex';
}
else if(choice === "2"){
let a=1
while(a<=76){
let char = document.getElementById(a);
char.style.display = 'none';
a++
}
let char = document.getElementById('3');
let char3 = document.getElementById('4');
let char4 = document.getElementById('7');
char.style.display = 'flex';
char3.style.display = 'flex';
char4.style.display = 'flex';
}
}.chad{
width: 100px;
height: 100px;
background-color:rgb(36, 105, 154) ;
overflow-x: hidden;
display: flex;
flex-wrap: wrap;
align-items: center;
border-radius: 1%;
justify-content: space-around;
display: none;
}<select name="first" id="101">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="second" id="102">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div class="result">
<div id="1" class="chad"><img src="" alt="" class="scale1" ></div>
<div id="2" class="chad"><img src="" alt="" class="scale1"></div>
<div id="3" class="chad"><img src="" alt="" class="scale1"></div>
<div id="4" class="chad"><img src="" alt="" class="scale1"></div>
<div id="5" class="chad"><img src="" alt="" class="scale1"></div>
<div id="6" class="chad"><img src="" alt="" class="scale1"></div>
<div id="7" class="chad"><img src="" alt="" class="scale1"></div>
</div>