お仕事で、jqtransform.jsが使われてるselectタグと戯れた際のメモ

jqtransform.jsの概要

概要はこちらでご一読。JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」
既存のフォームをきれいなUIに変えるjqueryプラグインて感じですかね。
大まかな動きとしては、既存フォームのhtmlを取り込んで、別htmlに書き出しているようです。

プルダウン(selectタグ)の仕組み

書き出されるhtmlを見て分かったのですが、既存のselectタグを隠して、ul,li,aタグに書き換えてました。
なので、onchangeイベントが発火しません。selectタグではないので。
プルダウンがこんな感じのhtmlに変わってます。

<ul style="width: 174px; display: none; visibility: visible;">
<li><a index="0" href="#" class="selected">なし</a></li>
<li><a index="1" href="#">0g～10g</a></li>
<li><a index="2" href="#">11g～30g</a></li>
<li><a index="3" href="#">31g～35g</a></li>
<li><a index="4" href="#">36g～40g</a></li>
<li><a index="5" href="#">41g～50g</a></li>
・・・
</ul>

onchangeイベントを取得する方法

検索して出る答えはここ。つまり、aタグまでアクセスして、clickイベントを拾ってしまおうというもの。

導入してみた

実際導入してみたけど、、、、動かなーい。

$("#selecttag div.jqTransformSelectWrapper ul li a").click(function(){
    // やりたいことを素直に書く
});

で、よくよく考えると、このhtmlはjqueryftransformに書き出されている訳だから、、、そうか、htmlロード時点では存在しないんだな、ということで、ロードされた後（正確にはjqueryftransformでhtml書き出された後）動作するように、ready()で囲んでみました。

$(document).ready(function(){
    $("#selecttag div.jqTransformSelectWrapper ul li a").click(function(){
      // やりたいことを素直に信じて書く
    });
});

これで無事解決。

あれ、valueの変え方は？

で、valueの変え方ですが、選択された”見た目”の部分は、spanタグの中にあったので、

$("#selecttag div.jqTransformSelectWrapper span").text("mitamevalue");

これでOK。で、実際に”送信される”valueはjqueryftransformによって隠されたselectタグにセットしてやれば解決

$("#selecttag select.jqTransformHidden").val("postvalue");

以上！