javascriptを使ってselectボタンで表示の切り替えを行いたい

selectボタンを押したら対象のdivを表示させる処理を行いたいのですが、何度やってもエラーになってしまい困っています。

実際のコードは以下になります。

【HTML】

<form>
	<label>
    	<select id="changeSelect1" onchange="entryChange1();">
<option value="select0">選択してください</option>
                                                <option value="select1">足立区</option>
                                                <option value="select2">江東区</option>  
                                                <option value="select3">練馬区</option> 


		</select>
    </label>
</form>


<div class="boxArea">
                                        <div id="box0">
                                            
                                        </div>  

                                        <div id="box01">
                                        <p>box1の内容</p>  
                                        </div>  

                                        <div id="box02">
                                        <p>box2の内容</p>    
                                        </div>  

                                        <div id="box03">
                                        <p>box3の内容</p>    
                                        </div>  


</div>

【javascript】

<script type="text/javascript">





function entryChange1(){
	
	id = document.getElementById('changeSelect1').value;
	
	
	
	for(var y=1; y<=4; y++){
		
		for(var x=1; x<=4; x++){
			
			if(id=="'select'+y"){
				document.getElementById("'box0'+ x").style.display="block";
			}else{
				document.getElementById("'box0'+ x").style.display="none";
			}

			
		}

	}

}



</script>

上記には4回のループのみですが、実際は数十のループを想定しています。
そうなるとdocument.getElementById("'box0'+ x")の0が邪魔になってしまうのも難しい要素です...。

色々と試しましたが解決にたどり着けなさそうなのでアドバイスをいただきたく存じます。

kei344

2016/09/19 07:28

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、エラーはエラー文も記載ください。

行動規範の内容に同意します

回答1件

ベストアンサー

こういう処理の時、要素に ID を逐一つけて行くと、メンテナンス性が大変悪くなる。
何でもかんでも getElementById() でアクセスしない方がソースの可読性が上がります。

html
1<!DOCTYPE HTML>
2<html lang="en-US">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			.boxArea .box {
8				display: none;
9			}
10		</style>
11	</head>
12	<body>
13
14		<form>
15			<label>
16				<select id="changeSelect1">
17					<option value=0">選択してください</option>
18					<option value="1">足立区</option>
19					<option value="2">江東区</option>
20					<option value="3">練馬区</option>
21
22				</select>
23			</label>
24		</form>
25
26		<div class="boxArea">
27			<div class="box">
28				0
29			</div>
30			<div class="box">
31				1
32			</div>
33			<div class="box">
34				2
35			</div>
36			<div class="box">
37				3
38			</div>
39		</div>
40		<script type="text/javascript">
41			var select = document.getElementById('changeSelect1');
42			select.addEventListener('change', function () {
43				var boxes = document.getElementsByClassName('box');
44				var val = this.value;
45				for (var i = 0; i < boxes.length; i++) {
46					boxes[i].style.display = (i === parseInt(val)) ? 'block' : 'none';
47				}
48			});
49		</script>
50	</body>
51</html>