当前位置: 代码迷 >> Web前端 >> WebWork组合Ajax提供国家,省市级联菜单
  详细解决方案

WebWork组合Ajax提供国家,省市级联菜单

热度:159   发布时间:2012-11-05 09:35:12.0
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;
	}
}

?我的代码可能有点罗嗦,不过绝对可以很简单的完成级联

1 楼 hetylei 2008-08-28  
WW标记和JS代码混在一起 更难读了啊
为什么不试试JSON呢
2 楼 rmn190 2008-08-28  
在javaScript写了ww后,是不是就可以像Dojo那样地直接调用java代码了.
3 楼 boris-song 2008-08-28  
对,只要符合webwork的语法就可以直接调用Java程序中返回d
4 楼 Jissbon 2008-08-31  
那确实,json是个不错的选择!
  相关解决方案