eine oder alle Boxen einblenden
Zeige eine bestimmte Box an oder alle auf einmal
Der hier verwendete Code
<html>
<head>
<style>
*{
magin:0;
padding:0;
}
select{
height:30px;
font-size:20px;
}
main{
margin:0 auto;
display:flex;
flex-wrap:wrap;
max-width:600px;
}
.box{
height:196px;
display:none;
width:196px;
border:2px solid black;
font-size:35px;
text-align:center;
line-height:100px;
}
.sichtbar{
display:block;
}
</style>
</head>
<body>
<label>
<select>
<option value="1">Box 1</option>
<option value="2">Box 2</option>
<option value="3">Box 3</option>
<option value="4">Box 4</option>
<option value="5">Box 5</option>
<option value="6">Box 6</option>
<option value="7">Box 7</option>
<option value="8">Box 8</option>
<option value="9">Box 9</option>
<option value="allon">Alle Boxen einblenden</option>
<option value="off">Alle Boxen ausblenden</option>
</select>
</label>
<main>
<div class="box" id="box1">Box1</div>
<div class="box" id="box2">Box2</div>
<div class="box" id="box3">Box3</div>
<div class="box" id="box4">Box4</div>
<div class="box" id="box5">Box5</div>
<div class="box" id="box6">Box6</div>
<div class="box" id="box7">Box7</div>
<div class="box" id="box8">Box8</div>
<div class="box" id="box9">Box9</div>
</main>
</body>
<script>
document.getElementsByTagName('select')[0].addEventListener('change',function(){
var val=this.value;
var box=document.querySelectorAll('.box');
box.forEach(function(el){
if(val=='allon'){
el.classList.add('sichtbar');
}
if(val=='off'){
el.classList.remove('sichtbar');
}
if(val!='allon' && val!='off'){
if(el.classList.contains('sichtbar')){
el.classList.remove('sichtbar');
}
}
})
if(val!='allon' && val!='off'){
document.getElementById('box'+this.value).classList.add('sichtbar');
}
})
</script>
</html>