エリア→都道府県→路線→駅名を連携する絞り込みセレクトメニューの設置方法
エリア→都道府県→路線→駅名のドリルダウン検索をプルダウン形式で設置したい。以前に似たようなことをメモしたが、こちらの方法だとデータベースを用意しないといけないのが面倒臭い。何か良い方法が無いか探したところ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万リクエスト / 月を超える場合は有料プランを検討する。
関連記事
-
-
safariのみスクロール関連のイベントが発火しない
jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...
-
-
JavaScriptで特定の範囲内から整数値を、数値が被らずにランダムに取り出す
やりたかったのは1位から20位のランキング内で JavaScriptを用いてラン ...
-
-
jQuery UIを使って簡単にダイアログを表示させる方法
ブラウザ上でユーザーに対してちょっとした確認を行いたい場合はJavaScript ...
-
-
Chart.jsで横スクロール可能なグラフを表示
Chart.jsで折れ線グラフを表示するページがあった。過去1年分のデータをグラ ...
-
-
javascriptでのについて
javascriptを書く際に、 <script> <!-- ...
-
-
FileReader APIを用いて画像をアップロードせずにサムネイル表示
以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...
-
-
ページのリロード、ページの戻る
ブラウザのリロードと同じようなボタンを作成してほしいとの 要望があって色々あった ...
-
-
jQueryで関数処理中にブラウザのブロック(intro.js)
Ajaxで処理を行っている間、他の処理を行わせたくなかった。 「now load ...
-
-
JavaScriptで配列をループ処理(for-in)
JavaScriptでforeach使ったこと無かったけど、 配列のキーが連番じ ...
-
-
bootstrap-datetimepickerについて
日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、 普通のセレクト ...