一つ目を選択したら二つ目のセレクトの値が変化するようにしたいんだが、ソースの文字コードがEUCでjqueryのload()を使って読み込むと文字化けしてしまう。
文字コードがEUCなのは昔のソースなのでしょうがない。
いまさら直しようがない。
jquery の load() だと化けるってのもしょうがないだろう。調べるだけ無駄だ。
ということで、php側で一旦データを全部読み込んで、それをJSON形式のデータにして、直接javascriptのスクリプト部分に埋め込むことにしよう。
データのイメージ：
一つ目のセレクトがこんな感じであって、選択すると、
<select name="category_id">
<option value="0">爬虫類</option>
<option value="1">鳥類</option>
<option value="2">昆虫option>
</select>
こんなようなデータが読み込まれて二つ目のセレクトが生成される。（鳥類だったら"1"のデータがセレクトになる）var per_array ='{
"0":{
"1":"トカゲ",
"2":"ワニ",
"3":"ザリガニ",
},
"1":{
"4":"スズメ",
"5":"ハト",
"6":"トンボ"
},
"2":{
"7":"コオロギ",
"8":"バッタ"
}
}';
データベースにはこんな感じで入っている。
SELECT * FROM ikimono; id | category_id | name ----+-------------+---------- 1 | 0 | トカゲ 2 | 0 | ワニ 3 | 0 | ザリガニ 4 | 1 | スズメ 5 | 1 | ハト 6 | 1 | トンボ 7 | 2 | コオロギ 8 | 2 | バッタ (8 rows)
まず、データベースから値を読み込んで、JSON形式のデータを作成する。
$query = "SELECT id, name, category_id FROM ikimono";
$result = pg_query($pg, $query);
$n = pg_numrows($result);
if ($n){
for ($i=0;$i<$n;$i++){
$id = pg_result($result, $i, 0);
$name = pg_result($result, $i, 1);
$category_id = pg_result($result, $i, 2);
// ここで一個一個配列に入れておいて
$select_array[$category_id] .= '"'.$id.'":"'.$name.'",';
}
}
// ここでカテゴリー別に {} で囲む
foreach($select_array as $k => $v) {
$v = preg_replace('/,$/', '', $v);
$ikimono_data .= '"' . $k . '":{' . $v . '},';
}
$ikimono_data = preg_replace('/,$/', '', $ikimono_data);// 最後のカンマを削除
で、ページ表示部分のjavascript部分をこんな感じで。
配列の定義のところに直接phpでデータを埋め込む。
<script>
$(document).ready(function(){
$('select[name=category_id]').change(function(){
var category_id = $(this).val();
var ikimono_array ='{<?php echo $ikimono_data; ?>}';
var obj = jQuery.parseJSON(ikimono_array)[category_id];
var ikimono_select = '';
for (key in obj) {
ikimono_select += '<option value="'+key+'">' + obj[key] + "</option>";
}
$('select[name=ikimono_id]').empty().append(ikimono_select);
}).change();
});
</script>
二個目のセレクトは空っぽで用意しておく。
<select name="ikimono_id"> </select>
もっと他にいい方法がありそうな予感が大いににするが、とりあえずこんなところで。
