JSF 实现二级连动 AJAX

原稿地址：http://www.iteye.com/topic/614203

基于ajax的 页面 二级联动不刷新

1. <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>  
2. <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>  
3. <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>  
4. <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>  
5.   
6.   
7.   
8. <h:form id="f3">  
9. <rich:panel header="ajax 下拉列表的二级联动 实现">  
10.         <h:outputLabel value="国家" />:  
11.                           
12.                        <h:selectOneMenu id="country" valueChangeListener="#{userListAction.changeListeForCity}"  
13.                             value="#{userListAction.country}" style="width:100px"  
14.                             immediate="true">  
15.                             <f:selectItems value="#{userListAction.countries}" />  
16.                             <a4j:support event="onchange" reRender="city" immediate="true" />  
17.                         </h:selectOneMenu>  
18.                           
19.                         <h:outputLabel value="城市" />:  
20.                           
21.                         <a4j:outputPanel>  
22.                             <h:selectOneMenu id="city" value="#{userListAction.city}"  
23.                                 style="width:100px">  
24.                                 <f:selectItems value="#{userListAction.cities}" />  
25.                             </h:selectOneMenu>  
26.                         </a4j:outputPanel>  
27.                           
28.                     </rich:panel>  
29.                 </h:form> 

说明 主要是 通过 a4j:support   去监听值改变事件去更新 要联动的 h:selectOneMenu 的值，

当时出现一个奇怪的问题，就是后台list的值已经发生变化，但前台就是没反应，后来删除<a4j:outputPanel></a4j:outputPanel>问题得到解决！

 

 

下面是 监听 值改变事件的 方法 changeListeForCity

 

Java代码  

1. /** 
2.      * 基于 ajax的 二级联动 
3.      * @param event 
4.      */  
5.     public void changeListeForCity(ValueChangeEvent event){  
6.         cities.clear();  
7.         //通过该控件监听器 获取改变的新值  
8.         String newVal = (String) event.getNewValue();  
9.         if("CN".equals(newVal)){  
10.             cities.add(new SelectItem("WH","武汉"));  
11.             cities.add(new SelectItem("SZ","深圳"));  
12.             cities.add(new SelectItem("SH","上海"));  
13.         }else if("US".equals(newVal))  
14.         {  
15.             cities.add(new SelectItem("aa","aa"));  
16.             cities.add(new SelectItem("bb","bb"));  
17.             cities.add(new SelectItem("cc","cc"));  
18.         }else{  
19.             cities.add(new SelectItem("0","请选择"));  
20.         }  
21.     }  

 

 

 

其实 最关键的地方 还是 immediate="true"的设置

好文章，收藏了