JSFでh:selectOneMenuの値の変更にあわせて画面を動的に動かしたい

久しぶりの投稿です。

今更な基本的なお話しです・・・。
よくある話なのですが、プルダウンを変更したときに他の画面項目の値を変更したいということがありました。

このとき、プルダウンの値が変更されたら別項目の値を変更するように、
JavaScript側でonchangeでリスナーするのが普通だと思うのですが、
JSFの場合、idが特別なものになってしまい、JavaScript側でうまく認識してくれません・・。

xhtmlでの記述

  <h:selectOneMenu id="test1" class="test1Class" value="#{exampleBean.testValue}">
    <f:selectItem itemValue="A" itemLabel="A" />
  </h:selectOneMenu>

HTMLに変換後

 <select id="j_idt7_test1" name="j_idt7_test1" class="test1Class">
   <option value="A" selected="selected">A</option>
 </select>

これを解決しようと思ったとき、一つはidを使うのではなくclassのほうを使う方法があります。
classのほうは変換されていないので、そのままとれます。

    $(document).ready(function() {
        $(".test1Class").change(function(){
             ～～～～
        });
    });

ただ、classてこういう使い方を想定していないですし、
cssとかと組み合わせたら変なことになると思うので、さすがにこれはイケてないのかなと思います。

ここは、ajaxを使うのが正解なのかなと思います。

<f:ajax event="change" render="renderTest" listener="#{exampleBean.changeTest()}">
  <h:selectOneMenu id="test1" class="test1Class" value="#{exampleBean.testValue}">
    <f:selectItem itemValue="A" itemLabel="A" />
  </h:selectOneMenu>
</f:ajax>

でも、わざわざこのためにajax使うのも馬鹿らしい気がするなと思ったり。