勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

八地方区分→都道府県→路線→駅名の連携したセレクトメニュー

      2019/02/04

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示され、さらに都道府県を選ぶと路線が、路線を選ぶと駅名が選択できるといった一連のセレクトメニューを作成したかった。あと路線を選択する際はJR / 私鉄 / 地下鉄の3つのセレクトメニューに分けたかった。以下に方法をメモ。

 

路線図や駅名のデータ

以下サイトからCSVファイルをダウンロードする。今回必要になるのは事業者データ、路線データ、駅データになる。

http://www.ekidata.jp/dl/

CSVファイル一行目と同じカラムを設定したテーブルを作成し、以下のような形でデータを取り込む。

データ仕様は以下ページを参照。

http://www.ekidata.jp/doc/

尚、事業者データでJR or 私鉄は判断できるが地下鉄かどうかは判断できなかったのでsubwayカラム(int)を作成し、以下ページを参考の上で地下鉄の場合は1を、その他は0の値を入れた。16件だけなのですぐ対応できる。

https://ja.wikipedia.org/wiki/%E5%9C%B0%E4%B8%8B%E9%89%84%E4%B8%80%E8%A6%A7

 

都道府県と八地方区分データ

以下でadminer等からデータを突っ込む。

 

ajax受信用プログラム

 

ajax送信用プログラム

 

その他

駅名と何らかのデータを組み合わせたい場合は受信側で色々すれば対応できそう。

 - Ajax, JavaScript, jQuery

  関連記事

リアルタイムプレビュー時の改行とテーブルの上部揃え

■サンプル http://sample.taitan916.info/previ ...

JavaScriptでUNIXタイムスタンプ取得

UNIXタイムスタンプを用いた際、 年月日からすぐUNIXタイムスタンプを出した ...

jQueryのfind時に複数のセレクタ指定

みたいなソース ...

スマホ対応カルーセルスライダーslickの使い方

イメージスライダーでslickという使ったことないjQueryプラグインを見かけ ...

JavaScriptのvarとletとconst

JavaScript関連の調べ物をしていた際、変数の宣言時にvarではなくlet ...

jQueryでUNIXタイムスタンプの取得

jQueryでUNIXタイムスタンプを取得したい場合、 $.now()だけで取得 ...

jQuery Alert Dialogsで表示後に処理したい

最近携わったサイトの中でJavaScript内に「jAlert」とかいう記述があ ...

ページのリロード、ページの戻る

ブラウザのリロードと同じようなボタンを作成してほしいとの 要望があって色々あった ...

Ajaxを使用する際の注意

Ajaxで特にJSONPを使う際によくミスることがあるので 注意点をまとめておく ...

jQueryで配列の値を検索

やりたかった事は、配列の中に特定の値があるか どうか検索し、その後の分岐を行いた ...