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

 
  • <PRE class=java name="code">下面是多选框,其中的值有script载入</PRE>   
  • <PRE class=java name="code"><select id="provinceId" name="province" onChange="changeProvince();"></select></PRE>   
  • <PRE class=java name="code"><select id="cityId" name="city"></select></PRE>   
  • <P> </P>   
  • <P><SPAN style="BACKGROUND-COLOR: #fafafa">以下是script代码,载入省市</SPAN></P>   
  • <PRE class=java name="code">   <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>   
  • }</PRE>   
  • <PRE class=java name="code">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></PRE>   
  • <PRE class=java name="code">下面是Java程序代码,我的数据是放在内存中的,在Tomcat容器启动的时候就将其加载进来,利用spring的init配置方法</PRE>   
  • <PRE class=java name="code"><PRE class=java name="code"><bean id="nationService"  
  •         class="cn.com.ugugo.service.admin.nation.NationServiceImpl"  
  •         init-method="init">   
  •         <property name="nationDao">   
  •             <ref bean="nationDao" />   
  •         </property>   
  • </bean></PRE>   
  •  </PRE>   
  • <PRE class=java name="code">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;   
  •     }   
  • }</PRE>   
  • <P> 我的代码可能有点罗嗦,不过绝对可以很简单的完成级联</P>   
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值