前台技术--有关二级联动及多城市选择功能实现

最新推荐文章于 2022-04-13 23:57:08 发布

GP0071

最新推荐文章于 2022-04-13 23:57:08 发布

阅读量4.7k

点赞数

分类专栏：前台技术文章标签：二级联动城市选择器

本文为博主原创文章，未经博主允许不得转载。个人博客：http://www.gaopeng0071.cn/

本文链接：https://blog.csdn.net/gaopeng0071/article/details/18413333

版权

前台技术专栏收录该内容

17 篇文章 1 订阅

订阅专栏

下面记录下开发过程中的代码，便于后续使用。

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

GP0071

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前台技术--有关二级联动及多城市选择功能实现

下面记录下开发过程中的代码，便于后续使用。1、多选下拉框，实现左右联动选择，其中引用了bootstrap样式的网络资源，使用时需保证网络可用。<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>//使用jquery，实现select录入
复制链接

扫一扫