エリア→都道府県→路線→駅名を連携する絞り込みセレクトメニューの設置方法
エリア→都道府県→路線→駅名のドリルダウン検索をプルダウン形式で設置したい。以前に似たようなことをメモしたが、こちらの方法だとデータベースを用意しないといけないのが面倒臭い。何か良い方法が無いか探したところAPIを利用することで簡単に実装できた。以下に実装方法をメモ。
API公式サイト
http://express.heartrails.com/api.html
無料で使用可能だがその際はクレジット記載が必要とのこと。
サンプル
https://taitan916.info/sample/train/
ソースコード
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>エリア→都道府県→路線→駅の絞り込み検索</title> <style> #footer{ position: absolute; bottom: 1px; right: 1px; font-size: 10px; } p{ margin: 2px; padding: 2px; } </style> </head> <body> <div> <p>エリア</p> <select name="area" id="area"> <option value="">選択してください。</option> </select> </div> <div> <p>都道府県</p> <select name="prefecture" id="prefecture"> <option value="">エリアを選択してください。</option> </select> </div> <div> <p>路線</p> <select name="line" id="line"> <option value="">都道府県を選択してください。</option> </select> </div> <div> <p>駅</p> <select name="station" id="station"> <option value="">路線を選択してください。</option> </select> </div> <div id="msg"> </div> <div id="footer"> ©HeartRails Express </div> <script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script> <script> $(function(){ const api = '//express.heartrails.com/api/json'; //エリアデータ取得 $.ajax({ dataType : 'jsonp', url: api + '?method=getAreas', success: function( result ){ if( result.response.area ){ let area = '<option value="">選択してください。</option>'; $.each(result.response.area, function(index, value){ area += '<option value="' + value + '">' + value + '</option>'; $('#area').html(area); }) return false; }else{ alert('エラーが発生しました。'); } } }); //都道府県データ取得 $('#area').change(function(){ if( $(this).val() != '' ){ $.ajax({ dataType : 'jsonp', url: api + '?method=getPrefectures&area=' + $(this).val(), success: function( result ){ if( result.response.prefecture ){ let prefecture = '<option value="">選択してください。</option>'; $.each(result.response.prefecture, function(index, value){ prefecture += '<option value="' + value + '">' + value + '</option>'; $('#prefecture').html(prefecture); }) return false; }else{ alert('エラーが発生しました。'); } } }); } }); //路線データ取得 $('#prefecture').change(function(){ if( $(this).val() != '' ){ $.ajax({ dataType : 'jsonp', url: api + '?method=getLines&prefecture=' + $(this).val(), success: function( result ){ if( result.response.line ){ let line = '<option value="">選択してください。</option>'; $.each(result.response.line, function(index, value){ line += '<option value="' + value + '">' + value + '</option>'; $('#line').html(line); }) return false; }else{ alert('エラーが発生しました。'); } } }); } }); //駅データ取得 $('#line').change(function(){ if( $(this).val() != '' ){ $.ajax({ dataType : 'jsonp', url: api + '?method=getStations&line=' + $(this).val(), success: function( result ){ if( result.response.station ){ let station = '<option value="">選択してください。</option>'; $.each(result.response.station, function(index, value){ station += '<option value="' + value.name + '" data-line="' + value.line + '" data-next="' + value.next + '" data-postal="' + value.postal + '" data-prefecture="' + value.prefecture + '" data-prev="' + value.prev + '" data-x="' + value.x + '" data-y="' + value.y + '">' + value.name + '</option>'; $('#station').html(station); }) return false; }else{ alert('エラーが発生しました。'); } } }); } }); //駅選択時 $('#station').change(function(){ if( $(this).val() != '' ){ let msg = ''; const selected = '#station option:selected'; msg += '<p>エリア:' + $('#area option:selected').val() + '</p>'; msg += '<p>都道府県:' + $(selected).data('prefecture') + '</p>'; msg += '<p>駅:' + $(this).val() + '</p>'; msg += '<p>路線:' + $(selected).data('line') + '</p>'; console.log($(selected).data('next')); if( $(selected).data('next') ){ msg += '<p>次の駅:' + $(selected).data('next') + '</p>'; } if( $(selected).data('prev') ){ msg += '<p>前の駅:' + $(selected).data('prev') + '</p>'; } msg += '<p>郵便番号:' + $(selected).data('postal') + '</p>'; msg += '<p>経度:' + $(selected).data('x') + '</p>'; msg += '<p>緯度:' + $(selected).data('y') + '</p>'; $('#msg').html(msg); } }); }); </script> </body> </html>
駅選択時に経度緯度や郵便番号を取得できるのでGoogleマップ等とも連携できそう。
所感
大規模サイトとかじゃなければ今回の方法を使っていけそう。100万リクエスト / 月を超える場合は有料プランを検討する。
関連記事
-
-
画像をドラッグ&ドロップでアップロードする方法
画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にdro ...
-
-
Ajaxの負荷対策
Ajaxを使ってボタンを押した際に表示を切り替える処理。 都度Ajaxを使ってた ...
-
-
jQueryのdatetimepickerでスクロールを無効
日時ピッカーのjQuery datetimepickerにて、ピッカーを指定して ...
-
-
リンク部分にマウスオーバーでツールチップを表示(nicetitles.js)
既存のソースにて見たことの無いプラグインが 使われていたのでメモ。 ■参考 ht ...
-
-
CSSとJavaScriptでテキストのコピー防止
あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...
-
-
POP広告をjQueryで再現する方法
サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...
-
-
pjaxについてのメモ
ずっと気になっていたpjaxについてのメモ。 ■参考サイト http://chi ...
-
-
jQueryのappendとprepend
よく忘れるのでメモ。 ■append(後ろに足す) http://semooh. ...
-
-
Ajaxでプラグイン無しのファイルアップロード
画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...
-
-
SortableJSを使ってデータの並べ替え&保存
あるシステムを拝見した際にtableタグ内に並んでいる項目をドラッグ&ド ...