駅データドリルダウン

駅データのドリルダウンを作成しました。
http://www.ekidata.jp/
こちらのサイトを参考に作成です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form id="form" name="form" method="post" action="">
<p>
 
都道府県:<select name="prefecture" onChange="setMenuItem(0,this[this.selectedIndex].value)">
<option value="0">▼選択してください</option>
<option value="1">北海道</option>
<option value="2">青森県</option>
<option value="3">岩手県</option>
<option value="4">宮城県</option>
・・・・・
</select>
 沿線:<select name="line" onChange="setMenuItem(1,this[this.selectedIndex].value)">
<option value="0">▼選択してください</option>
  <option value=""></option>
</select>
    駅:
      <select name="station">
      <option value="0">▼選択してください</option>
<option value=""></option>
</select></p>
</form>


スポンサーリンク

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script type="text/javascript"><!--
function setMenuItem(type,code){
 
	var s = document.getElementsByTagName("head")[0].appendChild(document.createElement("script"));
	s.type = "text/javascript";
	s.charset = "utf-8";
 
	var optionIndex0 = document.form.line.options.length;	//沿線のOPTION数取得
	var optionIndex1 = document.form.station.options.length;	//駅のOPTION数取得
 
	if (type == 0){
		for ( i=0 ; i <= optionIndex0 ; i++ ){document.form.line.options[0]=null}	//沿線削除
		for ( i=0 ; i <= optionIndex1 ; i++ ){document.form.station.options[0]=null}	//駅削除
		document.form.station.options[0] = new Option("▼選択してください",0);	//駅OPTIONを空にする
		if (code == 0){
			document.form.line.options[0] = new Option("▼選択してください",0);	//沿線OPTIONを空にする
		}else{
			s.src = "http://www.ekidata.jp/api/p/" + code + ".json";	//沿線JSONデータURL
		}
	}else{
		for ( i=0 ; i <= optionIndex1 ; i++ ){document.form.station.options[0]=null}	//駅削除
		if (code == 0){
			document.form.station.options[0] = new Option("▼選択してください",0);
		}else{
			s.src = "http://www.ekidata.jp/api/l/" + code + ".json";	//駅JSONデータURL
		}
	}
 
}
 
var xml = {};
xml.onload = function(data){
	var line      = data["line"];
	var station_l = data["station_l"];
	if(line != null){
		document.form.line.options[0] = new Option("▼選択してください",0);		//OPTION1番目はNull
		for( i=0; i<line.length; i++){
			ii = i + 1	//OPTIONは2番目から表示
			var op_line_name = line[i].line_name;
			var op_line_cd   = line[i].line_cd;
			document.form.line.options[ii] = new Option(op_line_name,op_line_cd);
		}
	}
	if(station_l != null){
		document.form.station.options[0] = new Option("▼選択してください",0);		//OPTION1番目はNull
		for( i=0; i<station_l.length; i++){
			ii = i + 1	//OPTIONは2番目から表示
			var op_station_name = station_l[i].station_name;
			var op_station_cd   = station_l[i].station_cd;
			document.form.station.options[ii] = new Option(op_station_name,op_station_cd);
		}
	}
}
 
// --></script>

都道府県用のドリルダウンもありますのでご覧下さい。

駅データドリルダウンデモサイト

都道府県データドリルダウンデモサイト

Pocket
LINEで送る

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です