JSF ajax 二级联动

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

 

首先看页面 

 

  

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>



<h:form id="f3">
<rich:panel header="ajax 下拉列表的二级联动 实现">
		<h:outputLabel value="国家" />:
						
                       <h:selectOneMenu id="country" valueChangeListener="#{userListAction.changeListeForCity}"
							value="#{userListAction.country}" style="width:100px"
							immediate="true">
							<f:selectItems value="#{userListAction.countries}" />
							<a4j:support event="onchange" reRender="city" immediate="true" />
						</h:selectOneMenu>
						
						<h:outputLabel value="城市" />:
						
                        <a4j:outputPanel>
							<h:selectOneMenu id="city" value="#{userListAction.city}"
								style="width:100px">
								<f:selectItems value="#{userListAction.cities}" />
							</h:selectOneMenu>
						</a4j:outputPanel>
						
					</rich:panel>
				</h:form>

 

 

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

 

 

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

 

/**
	 * 基于 ajax的 二级联动
	 * @param event
	 */
	public void changeListeForCity(ValueChangeEvent event){
		cities.clear();
		//通过该控件监听器 获取改变的新值
		String newVal = (String) event.getNewValue();
		if("CN".equals(newVal)){
			cities.add(new SelectItem("WH","武汉"));
			cities.add(new SelectItem("SZ","深圳"));
			cities.add(new SelectItem("SH","上海"));
		}else if("US".equals(newVal))
		{
			cities.add(new SelectItem("aa","aa"));
			cities.add(new SelectItem("bb","bb"));
			cities.add(new SelectItem("cc","cc"));
		}else{
			cities.add(new SelectItem("0","请选择"));
		}
	}

 

 

 

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