【Javascript】都道府県から路線名と駅名を取得する方法

12680 ワード
JavaScript jQuery JavaScript テキストリンク

成果物


こんな感じで都道府県を選択すると、路線名を取得して、
路線名を選択すると駅名を取得してくれます。

撮り鉄のマッチングサイトとか地図サイトとかに使えそうだと思いました。

環境

・Windows10
・Google Chrome
・VScode
・HeartRails Express

コード

index.html
<body>
        <table>
            <tr>
                <th>都道府県</th>
                <td>
                    <select id="pref">
                        <option value="">都道府県を選択してください</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>路線名</th>
                <td>
                    <select id="line">
                        <option value="">路線を選択してください</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>駅名</th>
                <td>
                    <select id="station">
                        <option value="">駅を選択してください</option>
                    </select>
                </td>
            </tr>
        </table>
    </body>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $(function () {
            //初期設定
            var pref = $('#pref'); //都道府県のIDタグを取得
            var line = $('#line'); //路線のIDタグを取得
            var station = $('#station'); //駅名のIDタグを取得

            //最初に都道府県を読み込む
            $.getJSON('http://express.heartrails.com/api/json?method=getPrefectures&callback=?',function (json) {
                $.each(json.response.prefecture,function (key,value) {
                    var text = String(this); //都道府県が配列で返ってきたので文字列に変換
                    pref.append('<option value="'+text+'">'+text+"</option>");
                });
            });

            //都道府県から路線を検索
            pref.on('change',function () {
                $.getJSON('http://express.heartrails.com/api/json?method=getLines&callback=?',
                {prefecture:pref.val()},
                function (json) {
                    line.children().not(':first').remove();//「選択してください」のみ残して削除
                    station.children().not(':first').remove();
                    $.each(json.response.line,function (key,value) {
                        var text = String(this);
                        line.append('<option value="'+text+'">'+text+"</option>");
                    });
                });
            });

            //路線から駅名を検索
            line.on('change',function () {
                $.getJSON('http://express.heartrails.com/api/json?method=getStations&callback=?',
                {line:line.val()},
                function (json) {
                    station.children().not(':first').remove();//「選択してください」のみ残して削除
                    $.each(json.response.station,function (key,value) {
                        if (this.prefecture == pref.val()) {
                            var text = String(this.name);
                            station.append('<option value="'+text+'駅">'+text+"駅</option>")
                        }
                    })
                })
            })
        });
    </script>

基本は、お馴染みのgetJSONメソッドでWebAPIを取得！

都道府県を選択しないと路線名が取得できない、
路線名を選択しないと駅名が選択できないようにすることを実現するために
getJSONメソッドの第二引数に路線には都道府県を、駅名には路線のJSONデータを指定しています。

選択したものはappendメソッドによりoptionタグに表示され利用になっています。