二级联动插件的开发与代码的编写

最新推荐文章于 2024-05-16 04:47:02 发布

wespten

最新推荐文章于 2024-05-16 04:47:02 发布

阅读量418

点赞数

分类专栏：全栈前端开发文章标签：二级联动插件的开发与代码的编写

本文链接：https://blog.csdn.net/qq_35029061/article/details/84248825

版权

全栈前端开发专栏收录该内容

61 篇文章 3 订阅

订阅专栏

二级联动插件的开发与代码的编写

二级联动的实现

<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function loadInfo(){
		var shengId=document.getElementById("sheng").value;
		shi.options.length=0;  // 删除所有市下拉框的选项
		var xmlHttp;
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}else{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlHttp.onreadystatechange=function(){
			if(xmlHttp.readyState==4 && xmlHttp.status==200){
				alert(xmlHttp.responseText);
				var dataObj=eval("("+xmlHttp.responseText+")");
				for(var i=0;i<dataObj.rows.length;i++){
					var o=dataObj.rows[i];
					shi.options.add(new Option(o.text,o.id));
				}
			}
		};
		xmlHttp.open("get", "getAjaxInfo?action=ejld&shengId="+shengId, true);
		
	    xmlHttp.send();
	}
</script>
</head>
<body>
省：
<select id="sheng" onchange="loadInfo()">
	<option value="1">江苏省</option>
	<option value="2">山东省</option>
	<option value="3">浙江省</option>
</select>
&nbsp;&nbsp;
市
<select id="shi">
</select>
</body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>HeadFirstAjaxJsonChap02</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
  	<servlet-name>getAjaxInfoServlet</servlet-name>
  	<servlet-class>com.web.GetAjaxInfoServlet</servlet-class>
  </servlet>
  
  <servlet-mapping>
  	<servlet-name>getAjaxInfoServlet</servlet-name>
  	<url-pattern>/getAjaxInfo</url-pattern>
  </servlet-mapping>
</web-app>

package com.java1234.web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class GetAjaxInfoServlet extends HttpServlet{

	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		String action=request.getParameter("action");
		if("ejld".equals(action)){
			this.ejld(request, response);
		}
		
	}

	
	private void ejld(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		PrintWriter out=response.getWriter();
		String shengId=request.getParameter("shengId");
		JSONObject resultJson=new JSONObject();
		JSONArray jsonArray=new JSONArray();
		JSONObject temp=null;
		switch(Integer.parseInt(shengId)){
			case 1:{
				temp=new JSONObject();temp.put("id", 1);temp.put("text", "南京");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 2);temp.put("text", "南通");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 3);temp.put("text", "泰兴");jsonArray.add(temp);
				break;
			}
			case 2:{
				temp=new JSONObject();temp.put("id", 4);temp.put("text", "济南");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 5);temp.put("text", "烟台");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 6);temp.put("text", "蓬莱");jsonArray.add(temp);
				break;
			}
			case 3:{
				temp=new JSONObject();temp.put("id", 7);temp.put("text", "杭州");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 8);temp.put("text", "宁波");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 9);temp.put("text", "温州");jsonArray.add(temp);
				break;
			}
		}
		resultJson.put("rows", jsonArray);
		out.println(resultJson);
		out.flush();
		out.close();
	}
	
}

动态二级联动

选择一个部门，那么职位的下拉框要展示这个部门下特定的职位。

setZw();
$("#SY_DDTX-infoForm-DDTX_DEP").change(function(){
	setZw();
});

function setZw(){
	$.each($("#infoForm-DDTX_POSI option"),function(index,obj){
		if(index!=0){
			$(obj).remove();
		}
	});
	var url = Leopard.getContextPath() + "/queryZwList.act";
	var bmId =  document.getElementById("infoForm-DDTX_DEP").value;
    var paramData = {"bmId":bmId};//"{bmId:" + bmId + "}";
    var jsonObj = getData(url,paramData);
	for(var i=0;i<jsonObj.length;i++){
		if(jsonObj[i].data.NAME==DDTX_POSI){
			$("#infoForm-DDTX_POSI").append("<option selected='selected' value='"+jsonObj[i].data.NAME+"'>"+jsonObj[i].data.NAME+"</option>");
		}else{
			$("#infoForm-DDTX_POSI").append("<option value='"+jsonObj[i].data.NAME+"'>"+jsonObj[i].data.NAME+"</option>");
		}
	}
}

后台查询Controller

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class SyDdtxController {
	@RequestMapping(value = "/queryZwList")
	@ResponseBody
	public List<IBean> queryZwList(HttpServletRequest request, String bmId) {
		String sql = "select * from SY_ZW where CODE = ?";
		List<IBean> itemsList = SqlUtil.getExecutor().queryForList(sql, bmId);
		return itemsList;
	}
}

  	<select id="getAllAreas" resultMap="BaseResultMap">
        select 
       		<include refid="Base_Column_List" />
        from ct_area
        where 1 = 1 and is_Delete is null 
        <if test="parentId != null and parentId != ''">
      		and parent_Id = #{parentId,jdbcType=VARCHAR} 
	    </if>
  	</select>
  	 
  	<select id="getProvince" resultMap="BaseResultMap">
        select 
       		<include refid="Base_Column_List" />
        from ct_area a
		WHERE EXISTS (SELECT 1 FROM ct_area b WHERE a.parent_Id = b.area_Id AND b.parent_Id IS NULL and b.is_Delete is null) 
		and a.is_Delete is null 
  	</select>

后台：

	/**
	 * 组装数据
	 * 只获取省、市信息
	 * @return
	 * @date 2018年3月14日
	 */
	public Map<String, Object> getPCity(Area area){
		//TODO 增加类型， 省、市、区
		Map<String, Object> retMap = new HashMap<String, Object>();
		List<Area> pList = getProvince();
		List<Area> allList = areaMapper.getAllAreas(area);
		//组装省、市数据
		Map<String, Object> pJson = new LinkedHashMap<String, Object>();			//省数据
		Map<String, List<Map<String, String>>> cJson = new HashMap<String, List<Map<String, String>>>();			//市数据
		if(null != pList && !pList.isEmpty()){
			for(int i = 0; i < pList.size(); i++){
				Area pArea = pList.get(i);
				Map<String, String> pMap = new HashMap<String, String>();
				pMap.put("id", pArea.getAreaId());
				pJson.put(pArea.getAreaName(), pMap);
				if(null != allList && !allList.isEmpty()){
					for(int j = 0; j < allList.size(); j++){
						Area area1 = allList.get(j);
						List<Map<String, String>> cList = cJson.get(pArea.getAreaId());
						if(null == cList)
							cList = new ArrayList<Map<String, String>>();
						if(pArea.getAreaId().equals(area1.getParentId())){
							Map<String, String> cMap = new HashMap<String, String>();
							cMap.put("id", area1.getAreaId());
							cMap.put("name", area1.getAreaName());
							cList.add(cMap);
						}
						cJson.put(pArea.getAreaId(), cList);
					}
				}
			}
		}
		retMap.put("pJson", pJson);
		retMap.put("cJson", cJson);
		return retMap;
	}
	
	/**
	 * 根据上级查询
	 * @return
	 * @date 2018年3月14日
	 */
	public List<Map<String, Object>> getAreaByPid(String pId){
		List<Map<String, Object>> retList = new ArrayList<Map<String, Object>>();
		Area area = new Area();
		area.setParentId(pId);
		List<Area> pList = areaMapper.getAllAreas(area);
		if(null != pList && !pList.isEmpty()){
			for(int i = 0; i < pList.size(); i++){
				Area area1 = pList.get(i);
				Map<String, Object> mMap = new HashMap<String, Object>();
				mMap.put("id", area1.getAreaId());
				mMap.put("name", area1.getAreaName());
				retList.add(mMap);
			}
		}
		return retList;
	}
	
	/**
	 * 获取省数据
	 * @return
	 * @date 2018年3月14日
	 */
	private List<Area> getProvince(){
		List<Area> pList = areaMapper.getProvince();
		return pList;
	}
}

@Controller
public class AreaController {
	private final static Logger log = LoggerFactory.getLogger(AreaController.class);
	
	@Autowired
	private AreaService areaService;
	
	@ResponseBody
	@RequestMapping(value = "/area/getPCity")
	public Map<String, Object> getPCity(Area area){
		try {
			return areaService.getPCity(area);
		} catch (Exception e) {
			log.error(e.getMessage(), e); 
		}
		return null;
	}
	
	@ResponseBody
	@RequestMapping(value = "/area/getAreaByPid")
	public List<Map<String, Object>> getAreaByPid(String pId){
		try {
			return areaService.getAreaByPid(pId);
		} catch (Exception e) {
			log.error(e.getMessage(), e); 
		}
		return null;
	}
}

二级联动插件

!function ($) {
	$.extend({
		getJSONP : function (a) {
			$.ajax({  
		        async : false,  
		        cache : false,  
		        type : 'POST',  
		        dataType : "json",  
		        url : a,  
		        error : function (e) {//请求失败处理函数 
		        	alert('获取地址数据失败');  
		        },  
		        success:function(data){ //请求成功后处理函数。
		        	getAreaListcallback(data);
		        }
		    }); 
		}
	});
}(jQuery);

var iplocation = null;

var provinceCityJson = null;

function stopPropagation(){
	e = event || window.event;
	e.stopPropagation();
}

//根据省份ID获取名称
function getNameById(provinceId){
	for(var o in iplocation){
		if (iplocation[o]&&iplocation[o].id==provinceId){
			return o;
		}
	}
	return "北京";
}

var isUseServiceLoc = true; //是否默认使用服务端地址

/**
 * 选择省
 * @param provinceId
 */
function chooseProvince(provinceId){
	provinceContainer.hide();
	currentAreaInfo.currentLevel = 1;
	currentAreaInfo.currentProvinceId = provinceId;
	currentAreaInfo.currentProvinceName = getNameById(provinceId);
	if(!page_load){
		currentAreaInfo.currentCityId = 0;
		currentAreaInfo.currentCityName = "";
		currentAreaInfo.currentAreaId = 0;
		currentAreaInfo.currentAreaName = "";
		currentAreaInfo.currentTownId = 0;
		currentAreaInfo.currentTownName = "";
	}
	areaTabContainer.eq(0).removeClass("curr").find("em").html(currentAreaInfo.currentProvinceName);
	areaTabContainer.eq(2).hide();
	areaTabContainer.eq(3).hide();
	areaContainer.hide();
	townaContainer.hide();
	if(provinceCityJson[""+provinceId] && provinceCityJson[""+provinceId].length > 0){
		areaTabContainer.eq(1).addClass("curr").show().find("em").html("请选择");
		cityContainer.show();
		cityContainer.html(getAreaList(provinceCityJson[""+provinceId]));
		cityContainer.find("a").click(function(){
			stopPropagation();
			if(page_load){
				page_load = false;
			}
			$("#store-selector", locationContainer).unbind("mouseout");
			chooseCity($(this).attr("data-value"),$(this).html());
		});
		if(page_load){ //初始化加载
			if(currentAreaInfo.currentCityId){
				chooseCity(currentAreaInfo.currentCityId,cityContainer.find("a[data-value='"+currentAreaInfo.currentCityId+"']").html());
			}
			else{
				chooseCity(cityContainer.find("a").eq(0).attr("data-value"),cityContainer.find("a").eq(0).html());
			}
		}
	}else {
		areaTabContainer.eq(0).addClass("curr").show().find("em").html("请选择");
		provinceContainer.show();
		currentAreaInfo.currentCityId = 0;
		currentAreaInfo.currentCityName = "";
		$('#store-selector', locationContainer).removeClass('hover');
		if(page_load){
			page_load = false;
		}
		$("input[location='city']", locationContainer).val("");
		if($("input[location='province']"), locationContainer)
			$("input[location='province']", locationContainer).val(currentAreaInfo.currentProvinceId);
		if($("input[location='oamAreaId']"), locationContainer)
			$("input[location='oamAreaId']", locationContainer).val(currentAreaInfo.currentProvinceId);
			
		var address = currentAreaInfo.currentProvinceName;
		$("#store-selector .text div", locationContainer).html(currentAreaInfo.currentProvinceName).attr("title",address);
	}
}


/**
 * 选择市
 * @param cityId
 * @param cityName
 */
function chooseCity(cityId,cityName){
	provinceContainer.hide();
	currentAreaInfo.currentLevel = 2;
	currentAreaInfo.currentCityId = cityId;
	currentAreaInfo.currentCityName = cityName;
	if(!page_load){
		currentAreaInfo.currentAreaId = 0;
		currentAreaInfo.currentAreaName = "";
		currentAreaInfo.currentTownId = 0;
		currentAreaInfo.currentTownName = "";
	}
	$('#store-selector', locationContainer).removeClass('hover');
	if(page_load){
		page_load = false;
	}
	if($("input[location='province']"), locationContainer)
		$("input[location='province']", locationContainer).val(currentAreaInfo.currentProvinceId);
	if($("input[location='city']"), locationContainer)
		$("input[location='city']", locationContainer).val(currentAreaInfo.currentCityId);
	if($("input[location='oamAreaId']"), locationContainer)
		$("input[location='oamAreaId']", locationContainer).val(currentAreaInfo.currentCityId);	
	
	var address = currentAreaInfo.currentProvinceName + " " + currentAreaInfo.currentCityName + " " + 
					currentAreaInfo.currentAreaName + " " + currentAreaInfo.currentTownName;
	$("#store-selector .text div", locationContainer).html(currentAreaInfo.currentProvinceName + " " +
			cleanKuohao(currentAreaInfo.currentCityName)).attr("title",address);
}

/**
 * 选择市
 * @param cityId
 * @param cityName
 */
function chooseCity_bak(cityId,cityName){
	provinceContainer.hide();
	cityContainer.hide();
	currentAreaInfo.currentLevel = 2;
	currentAreaInfo.currentCityId = cityId;
	currentAreaInfo.currentCityName = cityName;
	if(!page_load){
		currentAreaInfo.currentAreaId = 0;
		currentAreaInfo.currentAreaName = "";
		currentAreaInfo.currentTownId = 0;
		currentAreaInfo.currentTownName = "";
	}
	areaTabContainer.eq(1).removeClass("curr").find("em").html(cityName);
	areaTabContainer.eq(2).addClass("curr").show().find("em").html("请选择");
	areaTabContainer.eq(3).hide();
	areaContainer.show().html("<div class='iloading'>正在加载中，请稍候...</div>");
	townaContainer.hide();
	currentDom = areaContainer;
	$.getJSONP( CONTEXT_PATH + "/area/getAreaByPid?pId=" + cityId);
}

function getAreaList(result){
	var html = ["<ul class='area-list'>"];
	var longhtml = [];
	var longerhtml = [];
	if (result&&result.length > 0){
		for (var i=0,j=result.length;i<j ;i++ ){
			result[i].name = result[i].name.replace(" ","");
			if(result[i].name.length > 12){
				longerhtml.push("<li class='longer-area'><a href='javascript:void(0);' data-value='"+result[i].id+"'>"+result[i].name+"</a></li>");
			}
			else if(result[i].name.length > 5){
				longhtml.push("<li class='long-area'><a href='javascript:void(0);' data-value='"+result[i].id+"'>"+result[i].name+"</a></li>");
			}
			else{
				html.push("<li><a href='javascript:void(0);' data-value='"+result[i].id+"'>"+result[i].name+"</a></li>");
			}
		}
	}
	else{
		html.push("<li><a href='javascript:void(0);' data-value='"+currentAreaInfo.currentFid+"'> </a></li>");
	}
	html.push(longhtml.join(""));
	html.push(longerhtml.join(""));
	html.push("</ul>");
	return html.join("");
}

/**
 * 清除括号
 * @param str
 * @returns
 */
function cleanKuohao(str){
	if(str&&str.indexOf("(")>0){
		str = str.substring(0,str.indexOf("("));
	}
	if(str&&str.indexOf("（")>0){
		str = str.substring(0,str.indexOf("（"));
	}
	return str;
}

function getStockOpt(id,name){
	if(currentAreaInfo.currentLevel==3){
		currentAreaInfo.currentAreaId = id;
		currentAreaInfo.currentAreaName = name;
		if(!page_load){
			currentAreaInfo.currentTownId = 0;
			currentAreaInfo.currentTownName = "";
		}
	}else if(currentAreaInfo.currentLevel==4){
		currentAreaInfo.currentTownId = id;
		currentAreaInfo.currentTownName = name;
	}
	//添加20140224
	$('#store-selector', locationContainer).removeClass('hover');
	if(page_load){
		page_load = false;
	}
	//替换gSC
	var address = currentAreaInfo.currentProvinceName + " " + currentAreaInfo.currentCityName + " " + 
	currentAreaInfo.currentAreaName + " " +currentAreaInfo.currentTownName;
	$("#store-selector .text div", locationContainer).html(currentAreaInfo.currentProvinceName
			+ " " + cleanKuohao(currentAreaInfo.currentCityName) + " " + cleanKuohao(currentAreaInfo.currentAreaName) + " " + 
			cleanKuohao(currentAreaInfo.currentTownName)).attr("title",address);
}

/**
 * 返回数据处理
 * @param r
 */
function getAreaListcallback(r){
	currentDom.html(getAreaList(r));
	if (currentAreaInfo.currentLevel >= 2){
		currentDom.find("a").click(function(){
			stopPropagation();
			if(page_load){
				page_load = false;
			}
			if(currentDom.attr("id")=="stock_area_item"){
				currentAreaInfo.currentLevel=3;
			}
			else if(currentDom.attr("id")=="stock_town_item"){
				currentAreaInfo.currentLevel=4;
			}
			getStockOpt($(this).attr("data-value"),$(this).html());
		});
		if(page_load){ //初始化加载
			currentAreaInfo.currentLevel = currentAreaInfo.currentLevel==2?3:4;
			if(currentAreaInfo.currentAreaId){
				getStockOpt(currentAreaInfo.currentAreaId,currentDom.find("a[data-value='"+currentAreaInfo.currentAreaId+"']").html());
			}else{
				getStockOpt(currentDom.find("a").eq(0).attr("data-value"),currentDom.find("a").eq(0).html());
			}
		}
	}
}

function chooseArea(areaId,areaName){
	provinceContainer.hide();
	cityContainer.hide();
	areaContainer.hide();
	currentAreaInfo.currentLevel = 3;
	currentAreaInfo.currentAreaId = areaId;
	currentAreaInfo.currentAreaName = areaName;
	if(!page_load){
		currentAreaInfo.currentTownId = 0;
		currentAreaInfo.currentTownName = "";
	}
	areaTabContainer.eq(2).removeClass("curr").find("em").html(areaName);
	areaTabContainer.eq(3).addClass("curr").show().find("em").html("请选择");
	townaContainer.show().html("<div class='iloading'>正在加载中，请稍候...</div>");
	currentDom = townaContainer;
	$.getJSONP(CONTEXT_PATH + "/area/getAreaByPid?pId=" + areaId);
}

//选择器
var areaTabContainer = null;
var provinceContainer = null;
var cityContainer = null;
var areaContainer = null;
var townaContainer = null;
var currentDom = null;

function getCookie(name) {
	var start = document.cookie.indexOf(name + "=");
	var len = start + name.length + 1;
	if ((!start) && (name != document.cookie.substring(0, name.length))) {
		return null;
	}
	if (start == -1) return null;
	var end = document.cookie.indexOf(';', len);
	if (end == -1) end = document.cookie.length;
	return unescape(document.cookie.substring(len, end));
};


//当前地域信息
var currentAreaInfo;

/**
 * 初始化当前地域信息
 */
function currentAreaInfoInit(areaInfo){
	currentAreaInfo =  {"currentTownId":0,
						"currentTownName":""};
	var ipLoc =  getCookie("ipLoc-djd");
	ipLoc = areaInfo || (ipLoc ? ipLoc.split("-"):[]);
	if(ipLoc.length>0&&ipLoc[0]){
		currentAreaInfo.currentProvinceId = ipLoc[0];
		currentAreaInfo.currentProvinceName = getNameById(ipLoc[0]);
	}
	if(ipLoc.length>1&&ipLoc[1]){
		currentAreaInfo.currentCityId = ipLoc[1];
	}
	if(ipLoc.length>2 && ipLoc[2]){
		currentAreaInfo.currentAreaId = ipLoc[2];
	}
	if(ipLoc.length>3 && ipLoc[3]){
		currentAreaInfo.currentTownId = ipLoc[3];
	}
}

var provinceHtmlPre = '<div class="content"><div data-widget="tabs" class="m JD-stock" id="JD-stock">'
					+'<div class="mt">'
					+'    <ul class="tab">'
					+'        <li data-index="0" data-widget="tab-item" class="curr"><a href="javascript:void(0);" class="hover"><em>请选择</em><i></i></a></li>'
					+'        <li data-index="1" data-widget="tab-item" style="display:none;"><a href="javascript:void(0);" class=""><em>请选择</em><i></i></a></li>'
					+'        <li data-index="2" data-widget="tab-item" style="display:none;"><a href="javascript:void(0);" class=""><em>请选择</em><i></i></a></li>'
					+'        <li data-index="3" data-widget="tab-item" style="display:none;"><a href="javascript:void(0);" class=""><em>请选择</em><i></i></a></li>'
					+'    </ul>'
					+'    <div class="stock-line"></div>'
					+'</div>'
					+'<div class="mc" data-area="0" data-widget="tab-content" id="stock_province_item">'
					+'    <ul class="area-list">' ;
					
var provinceHtmlAfter = '    </ul>'
			+'</div>'
			+'<div class="mc" data-area="1" data-widget="tab-content" id="stock_city_item"></div>'
			+'<div class="mc" data-area="2" data-widget="tab-content" id="stock_area_item"></div>'
			+'<div class="mc" data-area="3" data-widget="tab-content" id="stock_town_item"></div>'
			+'</div>' +
			'</div>';

function initArea(locationContainer){
	
	$.ajax({  
        async : false,  
        cache : false,  
        type : 'POST',  
        dataType : "json",  
        url : CONTEXT_PATH + '/area/getPCity',  
        error : function (e) {//请求失败处理函数 
        	alert('获取地址数据失败');  
        },  
        success:function(data){ //请求成功后处理函数。
        	iplocation = data.pJson;
        	provinceCityJson = data.cJson;
        	var pHtml = "";
        	if(iplocation){
        		for(var p in iplocation){
        			pHtml += '<li><a href="javascript:void(0);" data-value="' + iplocation[p].id + '">' + p + '</a></li>';
        		}
        	}
        	
        	$("#store-selector .text", locationContainer).after(provinceHtmlPre + pHtml + provinceHtmlAfter);
        	areaTabContainer = $("#JD-stock .tab li", locationContainer);
        	provinceContainer = $("#stock_province_item", locationContainer);
        	cityContainer = $("#stock_city_item", locationContainer);
        	areaContainer = $("#stock_area_item", locationContainer);
        	townaContainer = $("#stock_town_item", locationContainer);
        	currentDom = provinceContainer;
        }  
    }); 
}

var page_load = true;
//var locationContainer = $('body');
var Location = {
		init : function(areaInfo, container){
			(function(areaInfo, container){
				$(document.body).unbind('click').bind('click',function(){
					$('#store-selector', locationContainer).removeClass('hover');
				});
				
				if(container)
					locationContainer = container;
				$("#store-selector", container).unbind("mouseover").bind("mouseover", function(){
					 locationContainer = container;
					 areaTabContainer = $("#JD-stock .tab li", locationContainer);
			         provinceContainer = $("#stock_province_item", locationContainer);
			         cityContainer = $("#stock_city_item", locationContainer);
					 
					$('#store-selector', container).addClass('hover');
					$("#store-selector .content,#JD-stock", container).show();
				}).find("dl").remove();
				
				$("#store-selector", container).unbind("mouseout").bind("mouseout", function(){
					locationContainer = container;
					$('#store-selector', container).removeClass('hover');
					$("#store-selector .content,#JD-stock", container).hide();
				});
				
				$("#store-selector div.close",container).unbind('click').bind('click', function(){
					locationContainer = container;
					stopPropagation();
					$('#store-selector', container).removeClass('hover');
				});
				initArea(container);
				currentAreaInfoInit(areaInfo);
				var _new = $("#JD-stock .tab li", locationContainer);
				areaTabContainer.eq(0).find("a").click(function(){
					
					stopPropagation();
					areaTabContainer.removeClass("curr");
					areaTabContainer.eq(0).addClass("curr").show();
					provinceContainer.show();
					cityContainer.hide();
					areaContainer.hide();
					townaContainer.hide();
					areaTabContainer.eq(1).hide();
					areaTabContainer.eq(2).hide();
					areaTabContainer.eq(3).hide();
				});
				
				areaTabContainer.eq(1).find("a").click(function(){
					stopPropagation();
					areaTabContainer.removeClass("curr");
					areaTabContainer.eq(1).addClass("curr").show();
					provinceContainer.hide();
					cityContainer.show();
					areaContainer.hide();
					townaContainer.hide();
					areaTabContainer.eq(2).hide();
					areaTabContainer.eq(3).hide();
				});
				areaTabContainer.eq(2).find("a").click(function(){
					stopPropagation();
					areaTabContainer.removeClass("curr");
					areaTabContainer.eq(2).addClass("curr").show();
					provinceContainer.hide();
					cityContainer.hide();
					areaContainer.show();
					townaContainer.hide();
					areaTabContainer.eq(3).hide();
				});
				provinceContainer.find("a").click(function() {
					stopPropagation();
					if(page_load){
						page_load = false;
					}
					$("#store-selector", locationContainer).unbind("mouseout");
					chooseProvince($(this).attr("data-value"));
				}).end();
				if(currentAreaInfo.currentProvinceId)
					chooseProvince(currentAreaInfo.currentProvinceId);
				else if(areaInfo && areaInfo[4])
					$("#store-selector .text div", locationContainer).html(areaInfo[4]).attr("title", areaInfo[4]);
				else
					$("#store-selector .text div", locationContainer).html("请选择地址").attr("title", "请选择地址");
			})(areaInfo, container);
		}
};

wespten

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
二级联动插件的开发与代码的编写

二级联动插件的开发与代码的编写二级联动的实现<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww...
复制链接

扫一扫