動的にoptionを書き換える

jquery php

Webアプリで都道府県をリストで選ぶと隣のリストが連動して該当する市町村に切り替わった
りするようなリストを実装することになったのでその時のお話。
環境としては、PHP(Smarty)・jQuery1.3.2を使ってます。

考えたこと

  • onChangeイベント拾って画面全体を条件に合わせて再表示すれば楽勝じゃね？
    • なにそれダサイ（却下）

というわけでtwitterでつぶやいたら色々教えてもらえた。*1

  1. onChangeでAjax通信でPHPを実行
  2. PHPからJSON返す
  3. JSONパースしてoptionを再生成

という手順がオススメとのこと。この流れにそって実装しました。
動的にSELECTを構築するためのjQueryプラグイン で紹介されているjQueryプラグインを使うと
簡単にoptionを書き換えることが出来るということで、このプラグインを使って実装することにしました。
ポイントとしてはIE6では一度リストをclearしてからaddしないとうまく行かないことがあるそうです。

作ったソース

http://github.com/regtan/jquery/blob/master/jquery.dynamicselectforjson.js

使い方

動的にSELECTを構築するためのjQueryプラグイン で紹介されているjQueryプラグインのjquery.dynamicselect.js
と今回作成したjquery.dynamicselectforjson.jsを読み込ませます。
動作のトリガーとなるselectタグのonChangeイベントでdynamicpulldownlist(url,postData,targetId)
を実行するようにしてあげてください。

引数は以下の通り

  • url
    • 呼び出すPHPモジュールのURL
  • postData
    • POSTでPHPに引き渡したいデータ
  • targetId
    • 動的に変えたいリストのid（id="hoge"ならば#hogeというように#を頭につけてください）

PHP側の仕様としては

echo('[{"text":"hoge","value":"1"},{"text":"hoge","value":"1"}]');

という感じでtextとvalueという要素を持つJSONを返してあげるようなモジュールを準備しておきます。
べつにJSONを返せばなんでもいいです。

ブラウザ対応

IE8とFx3では確認した所問題なく動作しています。IE6はわかりません。

作ってみて・・・

ソースを見直すとなんだかJavascriptぽくない＞＜　劣化Javaみたいw　というかCOBOL？
まだまだ精進がたりないようです・・・orz

*1:@imai78,@yamashiro,@smkw,@yuroyoro　ありがとうございました。