JSONは生きていた

ページを開いたときに、表示すべきデータがあるかどうかチェックして、その結果に応じてSELECTの項目を作る。
データベースを用意するのが面倒なので、絶対に値を返すようにする。

とりあえず形式はJSON形式で。

まずはPHPから。

// テキトーだけど
$first_array = array(
    array('name' => 'test1', 'code' => 1)
    , array('name' => 'test2', 'code' => 2)
    , array('name' => 'test3', 'code' => 3)
    , array('name' => 'test4', 'code' => 4)
    , array('name' => 'test5', 'code' => 5)
    , array('name' => 'test6', 'code' => 6)
    , array('name' => 'test7', 'code' => 7)
    , array('name' => 'test8', 'code' => 8)
    , array('name' => 'test9', 'code' => 9)
);
// JSON形式で返す（出力する）
echo json_encode($first_array);

returnじゃなくてecho()でないと値を取得できないってのは、どうなんだろう？
でもってHTML側（JavaScript）ね。
イメージ的には、既にあるid属性が「test」のselectに追加するカンジ。
test.pnpってのは、上に書いた内容が書かれてるPHPファイルね。

$(document).ready(function(){
    $.post("./test.php", "", function(result){
        var firstData = JSON.parse(result);
        jQuery.each(firstData, function(){
            $('#test').append($('<option>').attr({ value: this.code }).text(this.name));
        });
    });
});

jQuery.each()でループが簡単なのは便利だ。
.append()もなかなかだけど、わざわざ「<>」でくくる必要があるのはなぁ…

ソースを確認すると、こんなふう。

<SELECT id=test size=4 jQueryNNNNNNNNNNNNN="2">
<OPTION value=1>test1</OPTION>
<OPTION value=2>test2</OPTION>
<OPTION value=3>test3</OPTION>
<OPTION value=4>test4</OPTION>
<OPTION value=5>test5</OPTION>
<OPTION value=6>test6</OPTION>
<OPTION value=7>test7</OPTION>
<OPTION value=8>test8</OPTION>
<OPTION value=9>test9</OPTION>
</SELECT>

「jQueryNNNNNNNNNNNNN="2"」（Nは半角数字）ってなんだ！？
怖いから伏せておいたけど。