使用struts2+jquery+ajax生成联动下拉列表框（select）

有一个这样的需求，用户在填写收货地址的时候，如果用户在第一个下拉列表框选择了“广东省”，我们希望在右边弹出一个下拉列表框，里面可以选择广东省的某个市区，如果用户在市区中选择了“广州市”，我们希望在右边又弹出一个下拉列表框，里面可以选择广州市的某个区。

这种技术可以使用ajax完成。

整体思路是：

页面在加载的时候通过ajax向服务器发送同步请求，服务器返回一个json,页面通过分析这个json先把第一个select的数据填满，然后隐藏第二，三个select，如果用户在第一个select选择了具有子节点的选项，再通过ajax想服务器发送同步请求，页面得到数据后把第二个select填充，再把这个select显示，第三个select使用同样的方法。

首先要知道怎么为一个下拉列表框（select）增加一个选项！

从http://www.w3school.com.cn/htmldom/dom_obj_select.asp得知select 对象有一个add()方法

add()方法定义和用法如下：

add() 方法用于向 <select> 添加一个 <option> 元素。
语法：
selectObject.add(option,before)

参数     描述
option     必需。要添加选项元素。必需是 option 或 optgroup 元素。
before     必需。在选项数组的该元素之前增加新的元素。如果该参数是null，元素添加到选项数组的末尾。

Option 对象代表 HTML 表单中下拉列表中的一个选项。

该对象有下面两个主要属性：

text     设置或返回某个选项的纯文本值。     
value     设置或返回被送往服务器的值。

所以我们可以通过下面方法增加一个select 的option

function insertOption()
  {
  var y=document.createElement('option');
  y.text='Kiwi'
  var x=document.getElementById("mySelect");
  x.add(y,null);
  }

或者通过jquery为一个select增加一个选项

 var x = $("#id")[0];//[0]是必须的，原因不明！如果有高手知道，求解！
    option = new Option();
    option.text="abc";
    x.add(option,null);

然后我们要知道怎么用ajax向服务器发送请求，jquery为我们包装好一些方法：

$(document).ready(function() {
		$.ajaxSetup({async:false});
		var datas;
		$("#child_type").hide();
		$.getJSON("getGoodsType.action", function(json) {
			datas = json;
		});
		if (datas == undefined) {
			alert("no datas");
			return;
		}
		//do something next
}

$.ajaxSetup({async:false});这句话是指将默认的异步请求该为同步请求，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

getJSON方法定义如下：

jQuery.getJSON(url,data,success(data,status,xhr))

参数     描述
url     必需。规定将请求发送的哪个 URL。
data     可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)     可选。规定当请求成功时运行的函数。
                                额外的参数：
                                data - 包含来自请求的结果数据
                                status - 包含请求的状态
                                xhr - 包含 XMLHttpRequest 对象

服务器返回的json被封装在datas变量里面，通过这个变量可以同javascript进行其他操作。

下面介绍如何用strut2的action将json数据返回。

import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.LinkedHashMap;
import java.util.Map;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.interceptor.ServletResponseAware;

import util.JdbcUtils;
import util.JsonUtils;

import com.opensymphony.xwork2.ActionSupport;

public class GetGoodsType extends ActionSupport implements ServletResponseAware {

	private HttpServletResponse response;
	private int parentId = 0;

	@Override
	public String execute() throws Exception {
		response.setContentType("application/json;charset=UTF-8");
		response.setHeader("Cache-Control", "no-cache");

		PrintWriter pw = response.getWriter();
		System.out.println("execute方法被执行----------------");

		System.out.println("parentId=" + this.parentId);
		Connection conn = JdbcUtils.getConnection();
		Statement st = conn.createStatement();
		String sql = "select * from goods_type where parent_id = "
				+ this.parentId + ";";
		ResultSet rs = st.executeQuery(sql);
		Map<String, Object> map = new LinkedHashMap<String, Object>();
		int typeId;
		String typeName;
		while (rs.next()) {
			typeId = rs.getInt("type_id");
			typeName = rs.getString("type_name");
			map.put(typeId + "", typeName);
		}
		System.out.println(JsonUtils.toJson(map));
		pw.write(JsonUtils.toJson(map));
		pw.flush();
		pw.close();
		return null;
	}

	public void setParentId(int parentId) {
		System.out.println("setParentId方法被执行------------------");
		this.parentId = parentId;
	}

	public void setServletResponse(HttpServletResponse response) {

		this.response = response;

	}

}

JsonUtils是我自己写的一个工具类，当然现在有很多json插件，有专门为struts而做的插件，使用起来很方便。