首页 › JavaScript › Jquery Ajax 提交 级联实现

李学力 发表于 2013-1-23 02:05:23

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代码：
package 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;
 }
}
 
对应的配置文件
<?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>

查看完整版本: Jquery Ajax 提交 级联实现