级联菜单在web开发中是我们经常使用的,例如想要 一种 在第一个下拉框中选择不同的内容,第二个下拉框则会显示不同的内容的效果,则可以通过 ajax 和 json 来实现这一效果,上代码---
jsp 页面 内容
<body>
城市 : <select id="city" οnchange="getArea();">
<option>--请选择城市--</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="kf">开封</option>
</select>
地区 : <select id="area">
</select>
</body>
js 代码
<script type="text/javascript">
function getArea(){
var city = document.getElementById("city");
var cityOpt = city.options[city.selectedIndex]; //获取选中的下拉对象
//alert(cityOpt.value); //获取 选中的 value
//alert(city.firstChild.nodeValue); //获取 选中的文本内容
//进行 异步请求
//创建 XMLHttpRequest 对象
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//发送请求
xhr.open("POST","CascadeArea");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("city="+cityOpt.value);
//处理响应
var areaselect = document.getElementById("area");
xhr.onreadystatechange = function(){
//重新 获取前 先清空
areaselect.innerHTML = "";
if(xhr.readyState==4 && xhr.status == 200){
var areas = JSON.parse(xhr.responseText);
for(var i=0; i<areas.length; i++){ //循环创建 下拉选项
var area = document.createTextNode(areas[i]);
var opt = document.createElement("option");
opt.appendChild(area);
areaselect.appendChild(opt);
}
}
}
}
</script>
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String city = (String)request.getParameter("city");
System.out.println(city);
//模拟 dao 查询数据库
List<String> area = new ArrayList<String>();
if("bj".equals(city)){
area.add("朝阳区");
area.add("海淀区");
area.add("西二旗");
}
if("sh".equals(city)){
area.add("虹桥区");
area.add("陆家嘴");
area.add("东方明珠");
}
if("kf".equals(city)){
area.add("金明区");
area.add("明伦区");
area.add("河南大学");
}
//将集合 转成 json 字符串需要导入GSON的jar包
Gson gson = new Gson();
String areaStr = gson.toJson(area);
//输出 json 字符串
response.setHeader("Content-Type", "text/html;charSet=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.println(areaStr);
out.flush();
}
实现效果