style.displayだと効率悪いから...

質問

style.displayだと効率悪いからfor文を使いたいです。
以下はhtmlです。
なぜ効率悪いかというと、
一つ一つ、
セレクトごとに、
document.getElementById('Box1').style.display = "";と、
document.getElementById('Box1').style.display = "none";
を書かなければならないからです。
構文が長くなってしまい、非効率です。
しかし、document.getElementById自体1つしか書けないのです。
for文を使う必要があるのです。
ご教授願えたら幸いです。
<div class="col-auto my-1">
<label for="sample">選択してください</label>
</div>
<div class="col-auto my-1">
<select class="form-control" id="sample" onchange="viewChange();">
<option value="select1">one</option>
<option value="select2">two</option>
<option value="select3">three</option>
</select>
</div>
<div class="col-auto my-5">
<div id="Box1" class="my-5">
<p>one</p>
</div>
<div id="Box2" class="my-5">
<p>two</p>
</div>
<div id="Box3" class="my-5">
<p>three</p>
</div>
</div>
<script>
function viewChange(){
if(document.getElementById('sample')){
id = document.getElementById('sample').value;
if(id == 'select1'){
document.getElementById('Box1').style.display = "";
document.getElementById('Box2').style.display = "none";
document.getElementById('Box3').style.display = "none";
}else if(id == 'select2'){
document.getElementById('Box1').style.display = "none";
document.getElementById('Box2').style.display = "";
document.getElementById('Box3').style.display = "none";
}
else if(id == 'select3'){
document.getElementById('Box1').style.display = "none";
document.getElementById('Box2').style.display = "none";
document.getElementById('Box3').style.display = "";
}
}

window.onload = viewChange;
}
</script>

回答No.1

AsarKingChang

まとめてしまうって手はありますよ。
document.getElementById('Box1').style.display = 'select1'==id? "":"none";
document.getElementById('Box2').style.display = 'select2'==id? "":"none";
document.getElementById('Box3').style.display = 'select3'==id? "":"none";

foreachにしても別に構わないが、
IDラベルと、判定ラベルが、3個程度だと、ソースとしては
さらに長くなって逆に効率は悪くなるとは思う。

>document.getElementById自体1つしか書けないのです。
そんな事はないですよ。
let id_list[
document.getElementById('Box1').style,
document.getElementById('Box2').style,
document.getElementById('Box3').style
];
styleインスタンスへのポインタ（というか参照）を
リスト化してしまえば
id_list[0].display=?
とそれ自体を数字化もできます。

で、今回の量であれば、一番上の三項が
一番効率はいいだろうな。

もう一つは、
document.getElementById('Box1').style.display = "none";
document.getElementById('Box2').style.display = "none";
document.getElementById('Box3').style.display = "none";
と全部にNONEを設定してから、
if (?) {
document.getElementById('Box1').style.display = "";
}
と変化があるものだけをONにするというやり方もあります。

あと、関数化してしまって、
function box1( f ) {
if ( f ) {
document.getElementById('Box1').style.display = "";
}else{
document.getElementById('Box1').style.display = "none";
}
↑これは、
　document.getElementById('Box1').style.display = f? "":"none";
と等価。
}
後は、ONかOFFだけを与えるというのも手です。