路線や駅情報を提供してくれる、HeartRails ExpressのAPIを利用して、路線と駅のプルダウンを作成してみます。
HeartRails ExpressのAPIは、JSONPをサポートしているので、javascriptだけでできてしまいます。
利用するライブラリは、
JQuery
selectタグの操作を楽にしてくれるJQueryのプラグイン
JSONPをサポートしてくれるライブラリjsr_class.js
ダウンロードして、jsファイルをとりだし、下記のように宣言してあげます。
JAVASCRIPT:
-
<script src="js/jquery-1.2.1.min.js" type="text/javascript"></script>
-
<script src="js/jsr_class.js" type="text/javascript"></script>
-
<script src="js/jquery.selectboxes.pack.js" type="text/javascript"></script>
パスは適宜置き換えてください。
そして、実装コードはこんな感じになります。
JAVASCRIPT:
-
<script type="text/javascript">
-
//<![CDATA[
-
// 都道府県プルダウン変更時
-
var prefObj = {};
-
function PrefChange(){
-
if ($("#pref").val()){
-
var url = 'http://express.heartrails.com/api/json?method=getLines'
-
+ '&prefecture=' + encodeURIComponent( $("#pref").val() )
-
+ '&jsonp=PrefCallback';
-
prefObj = new JSONscriptRequest( url );
-
prefObj.buildScriptTag();
-
prefObj.addScriptTag();
-
} else {
-
$("#train").removeOption(/./);
-
}
-
}
-
function PrefCallback(json){
-
if (!json){ return; }
-
if (json.response.line.length == 0) { return; }
-
-
var lines = json.response.line;
-
var options = {};
-
for (var i = 0; i <lines.length; i++){
-
options[lines[i]] = lines[i];
-
}
-
$("#train").removeOption(/./);
-
$("#train").addOption(options,false);
-
prefObj.removeScriptTag();
-
}
-
-
// 路線プルダウン変更時
-
var trainObj = {};
-
function TrainChange(){
-
if ($("#train").val()){
-
var url = 'http://express.heartrails.com/api/json?method=getStations'
-
+ '&line=' + encodeURIComponent( $("#train").val() )
-
+ '&jsonp=TrainCallback';
-
trainObj = new JSONscriptRequest( url );
-
trainObj.buildScriptTag();
-
trainObj.addScriptTag();
-
} else {
-
$("#station").removeOption(/./);
-
}
-
}
-
function TrainCallback(json){
-
if (!json){ return; }
-
if (json.response.station.length == 0) { return; }
-
-
var stations = json.response.station;
-
var options = {};
-
for (var i = 0; i <stations.length; i++){
-
options[stations[i].name] = stations[i].name;
-
}
-
$("#station").removeOption(/./);
-
$("#station").addOption(options,false);
-
trainObj.removeScriptTag();
-
}
-
//]]>
-
</script>
HTMLはシンプルにこんな感じで。（都道府県は省略しました・・・。都道府県の値もAPIから取得できますが。手抜きで。）
HTML:
これは地図系のサイトでかなり使えそうですね。
関連する記事
←ぽちっとな
JavaでRESTするには(RestletによるAPI利用)＞＞
(5)
(0)
(0)
(1)
Total: 6 - Tags: API
ほげらっちょ
12月 9th, 2007 at 11:29:15
千葉県
valueの値は日本語より半角英数字の方がよい気が。。。
ソース参考になります。丸コピで使えそうでいいですね。
ueda
12月 9th, 2007 at 22:51:24
＞ほげらっちょさん
APIに渡すのが、日本語なんでそのまま日本語にしてます。
wadar
7月 10th, 2009 at 14:15:02
ページを開いた時に初期ですでに値をセットすることは可能でしょうか？
bonnaroo
7月 11th, 2009 at 22:26:46
もちろんできますよ。
ページ開いたときにjavascriptのonLoadなどをうまく利用すれば、うまくいくのではないでしょうか。
wadar
7月 14th, 2009 at 18:34:19
返信ありがとうございました。
JS初心者なものですみますん・・
生成されたプルダウンの初期選択を変更する方法がわかりませんでした。
「JS」の一部
function set_train(){
if ($(“#pref”).val()){
var url = 'http://express.heartrails.com/api/json?method=getLines'
+ '&prefecture=千葉県'
+ '&jsonp=PrefCallback';
prefObj = new JSONscriptRequest( url );
prefObj.buildScriptTag();
prefObj.addScriptTag();
} else {
$(“#train”).removeOption(/./);
}
if ($(“#train”).val()){
var url = 'http://express.heartrails.com/api/json?method=getStations'
+ '&line=JR内房線'
+ '&jsonp=TrainCallback';
trainObj = new JSONscriptRequest( url );
trainObj.buildScriptTag();
trainObj.addScriptTag();
} else {
$(“#station”).removeOption(/./);
}
}
「html」の一部
<body onLoad=”set_train()”>
trainの値の設定もわかりませんでした・・
お忙しいところ大変申し訳ありませんがソースや参考サイトを教えて頂けると助かります。
bonnaroo
7月 15th, 2009 at 12:50:20
こんな感じはいかがでしょうか。
<body onLoad=”set_train();”>
<script type=”text/javascript”>
function set_train(){
$('#pref').val('千葉県');
PrefChange();
}
function PrefCallback(json){
if (!json){ return; }
if (json.response.line.length == 0) { return; }
var lines = json.response.line;
var options = {};
for (var i = 0; i < lines.length; i++){
options[lines[i]] = lines[i];
}
$(“#train”).removeOption(/./);
$(“#train”).addOption(options,false);
prefObj.removeScriptTag();
$('#train').val('JR京葉線');TrainChange();
}
</script>
直書きしてしまってますが、参考になればと思います。
wadar
7月 16th, 2009 at 10:09:34
ご丁寧な対応ありがとうございました。
pref train station 共、DBに登録された路線情報から取得したデータを初期値として表示することが出来ました。