駅データのドリルダウンを作成しました。
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> |
都道府県用のドリルダウンもありますのでご覧下さい。