Jquery Ajax 提交 级联实现

页面代码

<div>
  
      省份：<select id="province">
           <option value="">请选择省份</option>
        </select>
      城市：<select id="city">
        <option value="">请选择城市</option>
        </select>
</div>

级联菜单js代码

$(document).ready(function(){ 
var province=$("#province"); 
var city=$("#city"); 
var provinceurl="/Struts2/base/selectProvince.action"; 
$.post(provinceurl,{code:"province"},function(data){ 
    var dataObj=eval("("+data+")"); 
    $.each(dataObj,function(index,item){ 
    var tempOption = document.createElement("option"); 
    tempOption.value = item.provinceId; 
    tempOption.innerHTML  = item.provinceName; 
    province.append(tempOption); 
    }); 
},"json"); 

province.change(function(){ 
  city.empty(); 
  var params={provinceCode:$('#province option:selected').val()}; 
  $.post("/Struts2/base/selectCity.action",params,function(data){ 
  alert(data); 
  var dataObj=eval("("+data+")"); //转换为json对象
    $.each(dataObj,function(index,item){ 
    var tempOption = document.createElement("option"); 
    tempOption.value = item.cityId; 
    tempOption.innerHTML  = item.cityName; 
    city.append(tempOption); 
    }); 
  },"json"); 
}); 
});

Action

ackage com.hyts.business.action;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import net.sf.json.JSONArray;
import com.hyts.dao.ProvinceDAO;
import com.hyts.model.City;
import com.hyts.model.Province;
import com.opensymphony.xwork2.ActionSupport;
public class ChainSelectAction extends ActionSupport {
 private static final long serialVersionUID = 1383189653446960523L;
 private HttpServletRequest request;
 private String result;//前台接收数据
 private String provinceCode;
 public String selectProvince()  {
  ProvinceDAO provinceDAO=new ProvinceDAO();
  List<Province> list=provinceDAO.getAllProvince();
  JSONArray jsonArray2 = JSONArray.fromObject( list );              
  this.result=jsonArray2.toString();
  return SUCCESS;
 }
 public String selectCity() throws Exception{
  ProvinceDAO provinceDAO=new ProvinceDAO();
  System.out.println(this.provinceCode);
  int provinceId=Integer.parseInt(this.provinceCode);
  List<City> list=provinceDAO.getCityByProvince(provinceId);
  for(int i=0;i<list.size();i++)
  {
   City city=list.get(i);
   System.out.println(city.getCityName());
  }
  JSONArray jsonArray = JSONArray.fromObject( list );
  this.result=jsonArray.toString();
  return SUCCESS;
 }
 public String getResult() {
  return result;
 }
 public void setResult(String result) {
  this.result = result;
 }
 
 public String getProvinceCode() {
  return provinceCode;
 }
 public void setProvinceCode(String provinceCode) {
  this.provinceCode = provinceCode;
 }
 public void setServletRequest(HttpServletRequest request) {
  this.request=request;
 }
}


Struts.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
  <include file="struts-default.xml"/>
  <package name="/base" extends="json-default" namespace="/base">
  <action name="selectProvince" class="com.hyts.business.action.ChainSelectAction" method="selectProvince">
           <result type="json">
              <param name="root">result</param>
           </result>
  </action>
  
  <action name="selectCity" class="com.hyts.business.action.ChainSelectAction" method="selectCity">
           <result type="json">
              <param name="root">result</param>
           </result>
  </action>
 </package>
</struts>

评论

2 楼 eric.zhang 2011-12-01  

lipulvp 写道

LZ， 我想问问您，我模仿你的代码，在第17行的时候出错了，我想，您返回的list结构是什么

第17行的list存放的就是Province对象啊。 Province有provinceId,provinceName属性。

1 楼 lipulvp 2011-11-27  

LZ， 我想问问您，我模仿你的代码，在第17行的时候出错了，我想，您返回的list结构是什么