Ajax-联动选择框

任务：完成功能，当上一个Select1选择后，下一个Select2联动显示相应的选择项

流程：

   1、在Select1后，加上onChange属性，指向javaScript方法changeType()

<select name="stype" id="stype" onchange="changeType()">

   2、在要显示select2的地方加上<div>标记，并赋id值

<div id="title"><select><option>请先选择文件类型</option></select></div>

   3、Controller层定义方法

@ResponseBody						//信息直接显示
@RequestMapping("/getTypeName")
public Map<String,Object> getTypeName(String type){
Map<String,Object> map = new HashMap<String,Object>();
switch(type){
case "1":map.put("list", policyFileDAO.findPageList(new PolicyFileModel(),new PageBounds()));break;
case "2":map.put("list", noticeDAO.findPageList(new NoticeModel(),new PageBounds()));break;
case "3":break;
}
return map;
}

  4、jsp页面定义方法

function changeType(){
var type = document.getElementById('stype').value; //通过id获取select1中选择的选项
var title = document.getElementById('title'); //通过id获取要显示select2的位置
title.innerHTML = ""; //将div内清空
//通过ajax来调用后台Controller，获取相应数据
$.ajax({
type:"post", //传递方式
url:"/linkFile/getTypeName", //调用的controller方法地址
data:{type:type}, //传递给controller的参数
success:function(data){ //当运行成功时，data即返回值
//我的后台方法传过来的是一个Map类型，于是在下面直接通过data.key，获得存储在Map中的值
var a = data.list; //获得存储在Map的中list列表
//通过循环，在str中存入html语句
var str = "<select name=\"stype\" id=\"stype\">";
for(var i=0; i<a.length; i++){
str += "<option id=\""+a[i].id+"\">" + a[i].title + "</option>";
}
str += "</select>";
title.innerHTML = str; //显示在id为title的<div>中
},
error: function (msg) { //当错误时输出错误参数
alert("error"+msg);
}
});
}