勉強したことのメモ

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

  関連記事

他サイトのRSS情報を画像付きで表示させる

WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイ ...

javascriptで画像を取り扱う際の注意

javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...

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

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

Ajaxでプラグイン無しのファイルアップロード

画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...

要素の点滅

やりたかった事はaタグ内で囲まれている部分を点滅。 <blink>だ ...

GoogleMapでメインカラーを変更する方法

GoogleMapAPIを用いたMAPでカラー変更をしたかった。カラーコードの指 ...

jQueryで偶数or奇数行にclassを付与

やりたかった事は、 ・PHPは使えなくてjavascriptかjQueryを使用 ...

jQuery.browser~みたいなエラーが出た

jQueryのプラグインを使っていて1.9以降だと「jQuery.browser ...

javascriptでブラウザ判別&ページ遷移

var userAgent = window.navigator.userAge ...

GoogleMapで半径●メートルを範囲表示

GoogleMapでマーカーを立てて、そこから範囲●mもしくは●kmを円で表示さ ...