需求：
使用ajax和jQuery实现下拉框联动。
注意：需要加入jquery-2.1.1.min.js
前台
<!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>Ajax jQuery下拉框联动案例</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; } %>