勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

エリア→都道府県→路線→駅名を連携する絞り込みセレクトメニューの設置方法

  jQuery JavaScript

エリア→都道府県→路線→駅名のドリルダウン検索をプルダウン形式で設置したい。以前に似たようなことをメモしたが、こちらの方法だとデータベースを用意しないといけないのが面倒臭い。何か良い方法が無いか探したところ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万リクエスト / 月を超える場合は有料プランを検討する。

 - jQuery JavaScript

  関連記事

jQueryにて指定した要素を検索条件から除外するnot()の利用方法

あるソースコードを拝見しているとjQueryでnot()という使ったことの無いメ ...

jQuery UIでカレンダーピッカー(Datepicker)の利用方法

フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...

jQueryのプラグイン(ColorPicker)でカラーコードを視覚的に選択させる方法

カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、 ...

SortableJSを使ってデータの並べ替え&保存

あるシステムを拝見した際にtableタグ内に並んでいる項目をドラッグ&ド ...

オリジナルのjQueryプラグインを作成する方法

オリジナルのjQueryプラグインを作ってみたかった。というのも大抵のものはググ ...