使用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;@Overridepublic 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而做的插件，使用起来很方便。