jQueryとJSONPでoptionタグを自動生成 - Servlet Garden ＠はてな

jQueryの$.postを使ってサーバにポスト、サーバからJSONPのデータをもらってselectのoptionタグを自動生成するという、よくありそうなあたりを作ったのですが、意外にも苦労したので忘れないようにメモです。

jQueryには$.getJSONという関数があるのですが、何が悪いのか私の環境で動かなかったし、GETではなくてPOSTを使いたかったので、$.post関数を使ってみました。JavaScript内で行ったのは以下。

POSTして帰ってくるdataTypeはJSONPなのでコールバック関数の引数にはdataTypeとしてjsonpを指定する。
サーバから受け取ったデータをJavaScriptのeval関数を使ってオブジェクトにする。
evalして得られるオブジェクトは配列なので、jQueryの$.each関数を使ってループさせる。
JavaScriptのOptionオブジェクトを生成してselectタグにappendする。

HTMLファイルはこんなふうになりました。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Create Option Tags Dynamically
<script type="text/JavaScript" src="jquery-1.2.6.min.js">
<script type="text/javascript">
<!--
$(document).ready(function(){
  $("select").hide();
  $(":radio").change(function(){
    $("select").hide();
    $("select").empty();
    var catalog = $(this).val();
    $.post (
      "catalog.php",
      {catalog_type: catalog},
      function(jsonp){
        var obj = eval('(' + jsonp + ')');
        $.each(obj['options'], function(i, o){
          var option = new Option(o.caption, o.value);
          $("select").append(option);
        });
        $("select").show();
      });
  });
});
//-->
</script>
</head>
<body>
<h4>Let's create option tags daynamically!</h4>
<input name="type" type="radio" value="flower"/>Flowers
<input name="type" type="radio" value="tree"/>Trees
<br/>
<select size="5"></select>
</body>
</html>

サーバ側の言語は何でもいいので、とにかくJSONPのフォーマットにしてデータを返せばよし、です。このプログラムの場合、ポスト先のcatalog.phpはこんなふうにしました。

<?php
if(isset($_REQUEST["catalog_type"])) {
	$catalog_type = $_REQUEST['catalog_type'];
	if ($catalog_type == 'flower') {
		getFlowers();
	} else if ($catalog_type == 'tree') {
		getTrees();
	}
}

function getFlowers() {
　　$ret = "{";
　　$ret .= "options: [";
    $ret .= "{value: 0, caption: 'magnoria'},";
    $ret .= "{value: 1, caption: 'gardenia'},";
    $ret .= "{value: 2, caption: 'honeysuckle'}";
    $ret .= "]";
    $ret .= "}";
　　echo $ret;
}

function getTrees() {
　　$ret = "{";
　　$ret .= "options: [";
    $ret .= "{value: 0, caption: 'maple'},";
    $ret .= "{value: 1, caption: 'oak'},";
    $ret .= "{value: 2, caption: 'elm'},";
    $ret .= "{value: 3, caption: 'dogwood'}";
    $ret .= "]";
    $ret .= "}";
　　echo $ret;
}
?>

これで、selectタグ内のoptionタグが自動的に生成されるので、

というようにFlowersをクリックすると花用の、Treesをクリックすると木用の選択が表示されるようになりました。

参考URL