下面记录下开发过程中的代码，便于后续使用。 1、多选下拉框，实现左右联动选择，其中引用了bootstrap样式的网络资源，使用时需保证网络可用。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css"> <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css"> <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> <script type="text/javascript"> //使用jquery，实现select录入域的左右双选 $(function(){ //移到右边 $('#add').click(function(){ //获取选中的选项，删除并追加给对方 $('#select1 option:selected').appendTo('#select2'); }); //移到左边 $('#remove').click(function(){ $('#select2 option:selected').appendTo('#select1'); }); //全部移到右边 $('#add_all').click(function(){ //获取全部的选项,删除并追加给对方 $('#select1 option').appendTo('#select2'); }); //全部移到左边 $('#remove_all').click(function(){ $('#select2 option').appendTo('#select1'); }); //双击选项 $('#select1').dblclick(function(){ //绑定双击事件 //获取全部的选项,删除并追加给对方 $("option:selected",this).appendTo('#select2'); //追加给对方 }); //双击选项 $('#select2').dblclick(function(){ $("option:selected",this).appendTo('#select1'); }); }); </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <td style=" 270px; height: 18px;"> 地域： </td> <td colspan="3"> <select name="select1" style="200px;height:200px" multiple="multiple" id="select1"> <option>A</option> <option>B</option> <option>C</option> <option>D</option> </select> <span id="add"><input type="button" class="btn" value=">"/></span> <span id="add_all"><input type="button" class="btn" value=">>"/></span> <span id="remove"><input type="button" class="btn" value="<"/></span> <span id="remove_all"><input type="button" class="btn" value="<<"/></span> <select name="select2" style="200px;height:200px" multiple="multiple" id="select2"></select> </td> </body> </html> 2、通过AJAX实现二级联动，不多说，看代码 a、通过调用checkBox方法，启用ajax通过参数获取后台数据。 /** * 使用ajax实现二级联动效果 * @param province */ function change_checkBox(province) { var province = province.value; var url = "getCity?proviceId=" + province; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } if (req) { req.open("POST", url, true); //指定回调函数为callback req.onreadystatechange = callback; req.send(null); } } //回调函数 function callback() { if (req.readyState == 4) { if (req.status == 200) { parseMessage(); //解析XML文档 } else { alert("不能得到描述信息:" + req.statusText); } } } //解析返回xml的方法 function parseMessage() { var xmlDoc = req.responseXML.documentElement; //获得返回的XML文档 var xSel = xmlDoc.getElementsByTagName('select'); //获得左侧下拉框数据 var select_left = document.getElementById('select1'); //获得右侧下拉框数据 var select_right = document.getElementById('select2'); //获得网页中的第二个下拉框 select_left.options.length = 0; //每次获得新的数据的时候先把每二个下拉框架的长度清0 for (var i = 0; i < xSel.length; i++) { var flag = true; var xValue = xSel[i].childNodes[0].firstChild.nodeValue; //获得每个<select>标记中的第一个标记的值,也就是<value>标记的值 var xText = xSel[i].childNodes[1].firstChild.nodeValue; //获得每个<select>标记中的第二个标记的值,也就是<text>标记的值 for (var j = 0; j < select_right.options.length; j++) { // 校验是否已经选过此城市 if(select_right.options[j].value == xValue){ flag = false; } } if(flag == true){ var option = new Option(xText, xValue); //根据每组value和text标记的值创建一个option对象 try { select_left.add(option); //将option对象添加到第二个下拉框中 } catch(e) {} } } } b、我后台用struts2，后台将关联在二级下拉框的数据已XML的形式进行组装，然后写到respose内，在通过a步骤的回调函数进行XML解析。 package com.haier.action; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import com.haier.bean.AdvCityDto; import com.haier.timer.GetChannelInfo; import com.opensymphony.xwork2.ActionSupport; /** * 查询地域信息ACTION * @author gaopeng * */ public class ADAreaAction extends ActionSupport { public String getCity() throws Exception { HttpServletResponse response = ServletActionContext.getResponse(); // 读取请求的参数 HttpServletRequest request = ServletActionContext.getRequest(); System.out.println("dopost"); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); request.setCharacterEncoding("GBK"); response.setCharacterEncoding("UTF-8"); String proviceId = request.getParameter("proviceId").toString(); System.out.println(proviceId); // 获得请求中参数为id的值 String xml_start = "<selects>"; String xml_end = "</selects>"; StringBuffer sb = new StringBuffer(); String xml = ""; // 市级列表 List<AdvCityDto> cityList = GetChannelInfo.CACHE_CITY_LIST; for (AdvCityDto advCityDto : cityList) { if (proviceId.equals(advCityDto.getProid())) { sb.append("<select><value>" + advCityDto.getCid() + "</value><text>" + advCityDto.getCname() + "</text></select>"); } } xml = sb.toString(); String last_xml = xml_start + xml + xml_end; response.getWriter().write(last_xml); return null; } } 我实现功能的截图： 以上的代码都是从网上组织，然后进行了改造。 二级联动参考：http://blog.csdn.net/supercrsky/article/details/8539123