jqtransform.jsのonchangeの仕方、valueの変え方

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

jqtransform.jsの概要

概要はこちらでご一読。JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」

既存のフォームをきれいなUIに変えるjqueryプラグインて感じですかね。

大まかな動きとしては、既存フォームのhtmlを取り込んで、別htmlに書き出しているようです。

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

書き出されるhtmlを見て分かったのですが、既存のselectタグを隠して、ul,li,aタグに書き換えてました。

なので、onchangeイベントが発火しません。selectタグではないので。

プルダウンがこんな感じのhtmlに変わってます。

- [なし](#)

- [0g～10g](#)

- [11g～30g](#)

- [31g～35g](#)

- [36g～40g](#)

- [41g～50g](#)

・・・

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");

以上！