WebWork结合Ajax提供国家，省市级联菜单

下面是多选框，其中的值有script载入
<select id="provinceId" name="province" onChange="changeProvince();"></select>
<select id="cityId" name="city"></select>
 
以下是script代码，载入省市
   <script type="text/javascript">
initProvince();
function initProvince()
{
  var provinceId = document.getElementById("provinceId");
  <ww:set name="i" value="1" />
  <ww:action name="provinceList" id="nation" namespace="/nation">
  </ww:action>
  <ww:iterator value="#nation.provinceList">
  var oOption<ww:property value="#i" /> = document.createElement("OPTION");
  
  oOption<ww:property value="#i" />.text = "<ww:property value='provinceName' />";
  oOption<ww:property value="#i" />.value = <ww:property value="provinceId" />;  
  provinceId.options.add(oOption<ww:property value="#i" />);
  changeProvince();
  <ww:set name="i" value="#i+1" />
  </ww:iterator>
}
function changeProvince(){
  var cityId = document.getElementById("cityId");
  var provinceId = document.getElementById("provinceId").value;
  cityId.innerHTML = "";
  
  <ww:action name="provinceList" id="nation" namespace="/nation">
  </ww:action>
  <ww:iterator value="#nation.provinceList">
  
  if(provinceId == "<ww:property value="provinceId" />"){
    <ww:action name="cityByProvinceIdList" id="nation" namespace="/nation" executeResult="false">
       <ww:param name="provinceId" value="provinceId" />
    </ww:action>
    <ww:set name="j" value="1" />
    <ww:iterator value="#nation.cityByProvinceIdList">
        var oOption<ww:property value="#j" /> = document.createElement("OPTION");
        oOption<ww:property value="#j" />.text = "<ww:property value='cityName' />";
        oOption<ww:property value="#j" />.value = <ww:property value="cityId" />;  
        cityId.options.add(oOption<ww:property value="#j" />);
        <ww:set name="j" value="#j+1" />
    </ww:iterator>
  }
  </ww:iterator>
}
 </script>
下面是Java程序代码，我的数据是放在内存中的，在Tomcat容器启动的时候就将其加载进来，利用spring的init配置方法
<bean id="nationService"
		class="cn.com.ugugo.service.admin.nation.NationServiceImpl"
		init-method="init">
		<property name="nationDao">
			<ref bean="nationDao" />
		</property>
</bean>
 
public class NationServiceImpl implements NationService {

	private NationDao nationDao;

	protected static Log log = LogFactory.getLog(NationServiceImpl.class);

	Map<Integer, Province> provinceMap = new HashMap<Integer, Province>();

	Map<Integer, City> cityMap = new HashMap<Integer, City>();

	Map<Integer, List<City>> cityMapByProvinceID = new HashMap<Integer, List<City>>();

	List<Province> provinces = new ArrayList<Province>();

	List<City> citys = new ArrayList<City>();

	List<City> citysByProvinces = new ArrayList<City>();

	/**
	 * @return the nationDao
	 */
	public NationDao getNationDao() {
		return this.nationDao;
	}

	/**
	 * @param nationDao
	 *            the nationDao to set
	 */
	public void setNationDao(NationDao nationDao) {
		this.nationDao = nationDao;
	}

	public void init() {

		List<Province> provinceList = this.nationDao.findAllProvince();
		for (Province province : provinceList) {
			// 得到省市，将省市根据ID放入map中
			provinceMap.put(province.getProvinceId(), province);
			provinces.add(province);

			List list = this.nationDao.findCityByProvinceID(province
					.getProvinceId());

			cityMapByProvinceID.put(province.getProvinceId(), list);
		}
		List<City> cityList = this.nationDao.findAllCity();
		for (City city : cityList) {
			// 得到所有城市，将城市根据城市ID放入map中
			cityMap.put(city.getCityId(), city);
			citys.add(city);
		}
	}

	public List<City> findCityByProvinceID(int provinceId) {
		Map<Integer, List<City>> map = this.getCity();
		List<City> list = cityMapByProvinceID.get(provinceId);

		if (list != null) {
			if (log.isDebugEnabled()) {
				log.debug("the cityeList has " + list.size());
			}
		}

		return list;
	}

	public Map<Integer, List<City>> getCity() {
		return cityMapByProvinceID;
	}

	public Map<Integer, City> findCityMap() {
		return cityMap;
	}

	public Map<Integer, Province> findProvinceMap() {
		return provinceMap;
	}

	public List<Province> findAllProvince() {
		return provinces;
	}

	public List<City> findAllCity() {
		return citys;
	}
}
 我的代码可能有点罗嗦，不过绝对可以很简单的完成级联

  


  

    
3 
顶
0 
踩
    
分享到：
      
      
    
  

  

    

      ajax.基础教程 中文 文档  手册
      |
      JavaScript图片上传前预览和限制图片格式
    
  
  

    

      
2008-08-27 23:25
      
浏览 3087
      
评论(4)
      
      
      
分类:企业架构
      
      
查看更多
    
    
  
    
  

    
评论
    
    

  

    4 楼
    Jissbon
    2008-08-31  
    
    
  
  
那确实，json是个不错的选择！



  

    3 楼
    boris-song
    2008-08-28  
    
    
  
  
对，只要符合webwork的语法就可以直接调用Java程序中返回d



  

    2 楼
    rmn190
    2008-08-28  
    
    
  
  
在javaScript写了ww后,是不是就可以像Dojo那样地直接调用java代码了.



  

    1 楼
    hetylei
    2008-08-28  
    
    
  
  
WW标记和JS代码混在一起 更难读了啊 

为什么不试试JSON呢