前台
<!DOCTYPE html><html><head><meta name="author" content="silvan" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script><title>发送GET请求</title><!-- 给select标签添加样式 --><style type="text/css">select { ???width: 160px; ???font-size: 11pt;}</style></head><body><form action="hehe"> ???<select name="first" id="first" > ???????<option value="0">---请选择---</option> ???????<option value="1" >中国</option> ???????<option value="2">美国</option> ???????<option value="3">日本</option> ???</select> ???<select name="second" id="second"></select> ???<script type="text/javascript"> ???//$(function(){});=$(document).ready(function(){})，$(function(){})是简写 ???$(function(){ ???????//改变下拉列表值时触发 ???????$("#first").change(function(){ ???????????//获取下拉列表选择值 ???????????var id = document.getElementById("first").value; ???????????//Ajax调用处理 ???????????$.ajax({ ??????????????type: "POST", ??????????????url: "second.jsp", ??????????????data: "id="+id, ??????????????success: function (data ,textStatus, jqXHR) { ???????????????// 将响应数据以$符号分隔成字符串数组 ??????????????????var cityList = data.split("$"); ??????????????????// 获取用于显示菜单的下拉列表 ??????????????????var displaySelect = document.getElementById("second"); ??????????????????// 将目标下拉列表清空 ??????????????????displaySelect.innerHTML = null; ??????????????????// 以字符串数组的每个元素创建option， ??????????????????// 并将这些选项添加到下拉列表中 ??????????????????for (var i = 0 ; i < cityList.length ; i++){ ??????????????????????// 创建一个<option.../>元素 ??????????????????????var op = document.createElement("option"); ??????????????????????op.innerHTML = cityList[i]; ??????????????????????// 将新的选项添加到列表框的最后 ??????????????????????displaySelect.appendChild(op); ??????????????????} ??????????????}, ??????????????error:function (XMLHttpRequest, textStatus, errorThrown) { ????????????????????????alert("请求失败！"); ??????????????} ???????????}); ????????}); ???});</script></form></body></html>后台
<%@ page contentType="text/html; charset=UTF-8" language="java"%><% ???String idStr = (String)request.getParameter("id"); ???int id = idStr == null ? 1 : Integer.parseInt(idStr); ???switch(id){ ???????case 1: ???????????out.println("上海$广州$北京"); ???????????break; ???????case 2: ???????????out.println("华盛顿$纽约$加州"); ???????????break; ???????case 3: ???????????out.println("东京$大板$福冈"); ???????????break; ???}%>Ajax jQuery菜单联动案例
原文地址：http://www.cnblogs.com/zhouyeqin/p/7868375.html