change イベント

質問

現在検索フォームを作成しており、セレクトボックスのchengeイベントにわからないとこがあり質問させていただきました。

ソース
<select name="pref" id="pref">
<option value="">↓地域を選択してください</option>
<option value="1001">北海道</option>
<option value="1002">東京都</option>
<option value="1003">愛知県</option>
<option value="1004">大阪府</option>
・
・
・
<option value="1047">沖縄</option>
</select>

<select name="city" id="city">
<option value="">↓地域を選択してください</option>
<option value="2010">札幌</option>
<option value="2011">函館</option>

<option value="2021">新宿</option>
<option value="2022">澁谷</option>
<option value="2023">池袋</option>

<option value="2031">名古屋</option>

<option value="2041">大阪</option>
・
・
・
<option value="2051">那覇</option>
</select>

<script type="text/javascript">
$(function () {
$('#pref').change(function(){
var data = $(this).val();
alert(data);
});
});
</script>

とあったときに
流れとしては
#prefで都道府県を選択→#cityでは#prefで選択した都道府県の町のみ表示する。
#prefの選択項目でvalue値を取得することはできたのですが、#cityに反映させることができません。

お分かりの方がいらっしゃいましたら教えていただけないでしょうか。

回答No.4

LancerVII

こんにちは。

JSONの形式がわからないのでそこはうまく実装してみてください。
optionの動的生成は以下のような感じでできます。

// まずは初期化
$('#onsen').children().remove();
for ( var i = 0; i < json.size; i ++ ) {
$('#onsen').append ( '<option value="'+json[i].value+'">' + json[i].name + '</option>' );
}

上記の場合sizeというキーには取得した要素数
value: 値
name: 表示名
がセットになったものが配列になったJSONのイメージです。

要素数分のループを実行し、要素内のvalueをoptionのvalueに、nameを表示にして
<select id="onsen">に追加していくイメージです。

回答No.3

LancerVII

こんにちは。

補足ありがとうございました。

私が実装するなら取得したxmlのパースをphpで行うようにしてJSONにてプルダウン用のデータを取得するようにします。
$('#pref').change(function(){
$.post (
'onsen.php',
{pref: pref},
function(json) {
// 受け取ったJSONでoptionを再構築
}
);
});

イメージとしてはこんな感じだと思います。
onsen.phpにpost(getでもいいけど)でprefコードを送信、onsen.phpにて受け取ったprefコードを利用してAPIにアクセス。

$pref = $_POST['pref'];

$url = "http://jws.jalan.net/APICommon/OnsenSearch/V1/?key=*****&pref=$pref&count=100";

これで取得したxmlをパースしてJSONを生成して出力する。

受け取ったJSONでプルダウンの中身を書き換えます。

補足

わかりにくい説明ご理解いただき有難う御座います。

昨晩やっており、
下記の内容まではできているのですが、わからずじまいのところがありまして・・・
type: "POST",
url: "onsen.php（実際は違うファイル名）",
data: data,
success: function(){
//受け取ったJSONでoptionの再構築方法がわからず・・・
}

お分かりになるようでしたらご教示お願いします。

JSONでonsen.phpにprefコードは渡せています。
$urlにもprefコードがはいるようになっているのですが、プルダウンの中身を書き換える方法にとまどっています。

回答No.2

LancerVII

こんにちは。

>これのprefとOnsenNameなります。
>prefを選んだときにprefidがOnsenNameと紐づいてが該当されるOnsenNameが表示されるようにしたいのです。
地域のプルダウンだと違う値だと思いますがいかがでしょうか。

どちらかというとこっちのような気がします。
http://www.jalan.net/jw/jwp0100/jww0103.do

なんでOnsenNameが出てくるかわかりません。
ごめんなさい、具体的に何がしたいか補足いただけませんか？

補足

説明不足で申し訳ありません。
まず使用するAPIが
エリア検索API：http://www.jalan.net/jw/jwp0100/jww0103.do
温泉検索API：http://www.jalan.net/jw/jwp0100/jww0104.do
です。

質問に書いたソースの#prefと#cityとありましたが、
#prefと#onsenに変更とさせていただきます。

<select name="pref" id="pref">
<option value="">↓地域を選択してください</option>
<option value="010000">北海道</option>
<option value="130000">東京都</option>
<option value="230000">愛知県</option>
<option value="270000">大阪府</option>
<option value="470000">沖縄</option>
</select>

<select name="onsen" id="onsen">
<option value="">↓温泉を選択してください</option>
<option value="01">北海道の温泉1</option>
<option value="02">北海道の温泉2</option>
<option value="03">北海道の温泉3</option>
<option value="10">東京都の温泉1</option>
<option value="11">東京都の温泉2</option>
<option value="20">愛知県の温泉1</option>
<option value="30">大阪府の温泉1</option>
<option value="40">沖縄県の温泉1</option>
</select>

<select name="pref" id="pref">は
エリア検索APIの都道府県(pref)をループで表示させています。
言語はphpを使用しています。
<option value="<?php Results->Area->cd ?>"><?php echo Results->Area->name ?></option>

地域を選択したら地域に当てはまる温泉のみを表示させたいのです。
例：地域で北海道を選択したら温泉には北海道の温泉1、北海道の温泉2、北海道の温泉3のみが選択できるように。

温泉の部分を読み込んでいるコードが
$url = http://jws.jalan.net/APICommon/OnsenSearch/V1/?key=*****&pref=010000&count=100";
としています。

地域を選択した際に地域のvalue値が上記のpref=の値が書き換わる仕様を望んでいます。
例：地域で東京都を選択したら$urlのpref=の値が東京都のvalue値13000に書き換わる。
　　書き換わったら温泉のセレクトボックスには東京都の温泉のみ選択可能(表示)されるようにする。

と以上を考えております。

回答No.1

LancerVII

こんにちは。

>#cityに反映させることができません。
cityのデータはどうやってprefのコードと紐付くようになっていますか？

見た感じ、prefのコードとcityがどのように関連しているか読み取れませんでした。

ちゃんとリレーションが取れていれば、選択されたprefのコードでcity一覧を取得してoptionを再構築して反映するだけです。

お礼

お忙しい中、ご回答有難う御座います。

紐付けはAPIになります。
http://www.jalan.net/jw/jwp0100/jww0104.do

これのprefとOnsenNameなります。

prefを選んだときにprefidがOnsenNameと紐づいてが該当されるOnsenNameが表示されるようにしたいのです。