原稿地址:http://www.iteye.com/topic/614203
基于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 的值,
当时出现一个奇怪的问题,就是后台list的值已经发生变化,但前台就是没反应,后来删除<a4j:outputPanel></a4j:outputPanel>问题得到解决!
下面是 监听 值改变事件的 方法 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"的设置
好文章,收藏了