selectOneMenu ３つ使用してajax

Primefacesを使用してwebアプリケーションを作成しています。

やりたいことは、１つ目のselectOneMenu（id="codeSegmentTotal")で値を選択すると、
そのコードに該当する項目が２つ目のselectOneMenu（id="codeSegment"）に表示され、
さらに、その２つ目のselectOneMenuで値を選択すると、それに該当する項目が
３つ目のSelectOneMenu（id="codeSegmentDetail"）に表示される
という機能を作りたいと思っています。

（１つ目のselectOneMenuで「県」を選択するとその「県」に該当する「市」が２つ目に表示され、
２つ目である「市」を選択すると、３つ目に「町」がリストアップされるようなイメージです。）

下記の通りコードを書いてみたところ、２つ目のselectOneMenuまでは思い通りに値が表示されるのですが、
３つ目のselectOneMenuにはそのままでは表示されず、F5でページを再読み込みする事でようやく
表示される感じです。

ページを再読み込みする事無く上記の機能を実現するにはどのようにしたら良いか、
ご教示いただけませんでしょうか。

よろしくお願いいたします。

<p:outputPanel id="aaaa">
<p:selectOneMenu id="codeSegmentTotal" value="#{tDataLoanListController.selected.codeSegmentTotal}">
<p:ajax process="@this" update="bbbb" event="change"/>
<f:selectItem itemLabel="--select--" noSelectionOption="true"/>
<f:selectItems value="#{tMSegmentTotalController.all}" var="segmenttotal"
itemValue="#{segmenttotal.codeSegmentTotal}" itemLabel="#{segmenttotal.nameSegmentTotal}"/>
</p:selectOneMenu>
</p:outputPanel>

<p:outputPanel id="bbbb">
<p:selectOneMenu id="codeSegment" value="#{tDataLoanListController.selected.codeSegment}">
<p:ajax process="@this" update="dddd" event="change"/>
<f:selectItem itemLabel="--select--" noSelectionOption="true"/>
<f:selectItems value="#{tDataLoanListController.getTMSegmentBySegmentTotal()}" var="segment"
itemValue="#{segment.codeSegment}" itemLabel="#{segment.nameSegment}"/>
</p:selectOneMenu>
</p:outputPanel>

<p:outputPanel id="dddd">
<p:selectOneMenu id="codeSegmentDetail" value="#{tDataLoanListController.selected.codeSegmentDet ail}">
<f:selectItem itemLabel="--select--" noSelectionOption="true"/>
<f:selectItems value="#{tDataLoanListController.getTMSegmentDetailBySegment()}" var="segment detail" itemValue="#{segmentdetail.codeSegmentDetail}" itemLabel="#{segmentdetail.nameSegmen tDetail}"/>
</p:selectOneMenu>
</p:outputPanel>