路線や駅情報を提供してくれる、HeartRails ExpressのAPIを利用して、路線と駅のプルダウンを作成してみます。

HeartRails ExpressのAPIは、JSONPをサポートしているので、javascriptだけでできてしまいます。

利用するライブラリは、
JQuery

selectタグの操作を楽にしてくれるJQueryのプラグイン

JSONPをサポートしてくれるライブラリjsr_class.js

ダウンロードして、jsファイルをとりだし、下記のように宣言してあげます。

PLAIN TEXT
JAVASCRIPT:
  1. <script src="js/jquery-1.2.1.min.js" type="text/javascript"></script>
  2. <script src="js/jsr_class.js" type="text/javascript"></script>
  3. <script src="js/jquery.selectboxes.pack.js" type="text/javascript"></script>

パスは適宜置き換えてください。

そして、実装コードはこんな感じになります。

PLAIN TEXT
JAVASCRIPT:
  1. <script type="text/javascript">
  2. //<![CDATA[
  3. // 都道府県プルダウン変更時
  4. var prefObj = {};
  5. function PrefChange(){
  6.   if ($("#pref").val()){
  7.     var url = 'http://express.heartrails.com/api/json?method=getLines'
  8.       + '&prefecture=' + encodeURIComponent( $("#pref").val() )
  9.       + '&jsonp=PrefCallback';
  10.     prefObj = new JSONscriptRequest( url );
  11.     prefObj.buildScriptTag();
  12.     prefObj.addScriptTag();
  13.   } else {
  14.     $("#train").removeOption(/./);
  15.   }
  16. }
  17. function PrefCallback(json){
  18.   if (!json){ return; }
  19.   if (json.response.line.length == 0) { return; }
  20.  
  21.   var lines = json.response.line;
  22.   var options = {};
  23.   for (var i = 0; i <lines.length; i++){
  24.     options[lines[i]] = lines[i];
  25.   }
  26.   $("#train").removeOption(/./);
  27.   $("#train").addOption(options,false);
  28.   prefObj.removeScriptTag();
  29. }
  30.  
  31. // 路線プルダウン変更時
  32. var trainObj = {};
  33. function TrainChange(){
  34.   if ($("#train").val()){
  35.     var url = 'http://express.heartrails.com/api/json?method=getStations'
  36.       + '&line=' + encodeURIComponent( $("#train").val() )
  37.       + '&jsonp=TrainCallback';
  38.     trainObj = new JSONscriptRequest( url );
  39.     trainObj.buildScriptTag();
  40.     trainObj.addScriptTag();
  41.   } else {
  42.     $("#station").removeOption(/./);
  43.   }
  44. }
  45. function TrainCallback(json){
  46.   if (!json){ return; }
  47.   if (json.response.station.length == 0) { return; }
  48.  
  49.   var stations = json.response.station;
  50.   var options = {};
  51.   for (var i = 0; i <stations.length; i++){
  52.     options[stations[i].name] = stations[i].name;
  53.   }
  54.   $("#station").removeOption(/./);
  55.   $("#station").addOption(options,false);
  56.   trainObj.removeScriptTag();
  57. }
  58. //]]>
  59. </script>

HTMLはシンプルにこんな感じで。（都道府県は省略しました・・・。都道府県の値もAPIから取得できますが。手抜きで。）

PLAIN TEXT
HTML:
  1. <select id="pref" onChange="PrefChange();">
  2. <option value="">都道府県を選択&nbsp;</option>
  3. <option value="東京都">東京都</option>
  4. <option value="神奈川県">神奈川県</option>
  5. <option value="埼玉県">埼玉県</option>
  6. <option value="千葉県">千葉県</option>
  7. </select>
  8. <br /><br />
  9. <select id="train" onChange="TrainChange();">
  10. <option value="">路線を選択&nbsp;&nbsp;&nbsp;</option>
  11. </select>
  12. <br /><br />
  13. <select id="station">
  14. <option value="">駅を選択&nbsp;&nbsp;&nbsp;&nbsp;</option>
  15. </select>

サンプルはこちら

これは地図系のサイトでかなり使えそうですね。

関連する記事

blogranking←ぽちっとな

＜＜
＞＞