下面记录下开发过程中的代码,便于后续使用。
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="width: 270px; height: 18px;">
地域:
</td>
<td colspan="3">
<select name="select1" style="width: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="width: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