プルダウンの表示内容をjQueryで書き換える

php symfony jQuery

次の案件がsymfony1.0ということで、久しぶりにsymfony1.0を触っています。
フォーム周りはまったくの別モノってぐらい違うのですが、やれば思い出すものです。

さて、symfony1.0でフォームにおいて日付のプルダウンをつくるとき、誰もが悩むであろう点があります。
それは、年、月、日のプルダウンを一括して出力するinput_date_tagという関数があるのですが、区切り文字は１つしか指定できないということです。

区切り文字が「/」だった場合は次のように表示されます。

決してユーザーに優しいUIではないですね。
日本的には [2009]年[03]月[29]日　のようにしたいところですがこれが簡単にできません。

というわけで、次に考えるのが区切り文字として空文字(NULL)を指定し、プルダウンの値に直接「年」や「月」を追加してしまう方法です。以下のようなプルダウンを作るわけです。

何も考えずに普通にやるならば、input_date_tagに渡す値を加工して、年や月などの文字を追加する方法でしょうか。
個人的にはテンプレート内であまりPHPのロジックを書きたくありません。できるだけプレーンなHTMLにしておきたいものです。
また、このためだけに、input_date_tagを拡張したinput_date_tag_jpなんて関数を用意したくもありません。

というわけで、こんなときこそjQueryを使うとテンプレートの中だけで処理が完結するのでスッキリするのではないかということで書いてみました。

今回のサンプルは 生年月日(birth)の年月日の各エレメントのID(birth_year, birth_month, birth_day)に文字列を追加する場合です。

<?php use_javascript('jquery/jquery-1.3.2.min.js') ?>
<script type="text/javascript">
//<![CDATA[
jQuery(function(){
    jQuery("#birth_year option").each(function(){
        jQuery(this).text(jQuery(this).text() + "年");
      });
    jQuery("#birth_month option").each(function(){
        jQuery(this).text(jQuery(this).text() + "月");
      });
    jQuery("#birth_day option").each(function(){
        jQuery(this).text(jQuery(this).text() + "日");
      });
});
//]]>
</script>
....
     <?php echo input_date_tag('birth', $hoge->getBirth(), 
                               array(
                                     'use_month_numbers' => true,
                                     'date_seperator' => '',
                                     )) ?>

さきほどのキャプチャ結果は上記スクリプトを実行した結果です。

たまたま、フレームワークが絡んだ話で説明していますが、今回のネタはjQueryでオプションのテキストを書き換えているだけです。jQuery使えると便利ですよってお話でした。