三级联动 div层

var div=$("<div/>").attr("id","_contents");
document.writeln($("<span/>").append(div).html());
var doSelectObj="";
/**
 * @param {} obj//传值元素
 */
function setTimeById(id){
	var obj=document.getElementById(id);
	setTime(obj);
}
function setTime(obj){
	doSelectObj=obj;//将传值进来的元素赋给一公共变量。
	
	var setTop=obj.offsetTop;//距离上方或上层控件的位置,整型,单位像素。
	var setLeft=obj.offsetLeft;//距离左方或上层控件的位置,整型,单位像素
	var setWidth=obj.offsetWidth;//控件自身的宽度,整型,单位像素。
	var setHeight=obj.offsetHeight;//控件自身的高度,整型,单位像素。
	var clientHeight=obj.clientHeight;//控件本身的高。(内容可视区域的高度)。
	/*
	 * offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 
	 * 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素;在怪异呈现模式下为body元素)的引用。 
	 * 当容器元素的style.display 被设置为 "none"时(译注:IE和Opera除外),offsetParent属性 返回 null。
	 */
	while (obj.offsetParent) {//如果obj还有父类容器。
		obj=obj.offsetParent;//重新给obj赋一个元素对象的引用(父类容器),则while会无限循环,一直取到页面的最外层。
			setTop += obj.offsetTop;
			setLeft += obj.offsetLeft;
	}
	//省的数据。
	var select1=$("<select/>").attr("id","_pro").attr("onChange","selectCity();");
	var proId=0;
	$.ajax({
		type: "post",
   		url: "area_province.action",
   		async:false,//默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
   		dataType:"json",
   		success: function(data){
     		var list=data.list;//取得回调的省的list.
			//遍历list.
			$.each(list,function(key,value){
				if(key==0){//第一条记录。(默认被选中哦)
					proId=value.id;
				}
				var areaName=value.areaName;
				var option=$("<option/>").val(areaName).append(areaName);
				select1.append(option);
			});
   		}
	});
	//直辖市下的区,省下市
	var select2=$("<select/>").attr("id","_city").attr("onChange","selectTown();");
	var cityId=0;
	var areaType=0;
	$.ajax({
		type: "post",
   		url: "area_findCity.action",
   		data:"parentId="+proId,
   		async:false,//默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
   		dataType:"json",
   		success: function(data){
     		var list=data.list;//取得回调的省的list.
			//遍历list.
			$.each(list,function(key,value){
				if(key==0){//第一条记录。(默认被选中哦)
					cityId=value.id;
					areaType=value.areaType;//地区类型:0,国家。1,直辖市。2,省。3,直辖市下的区。4,省下市。5,市下区(县)
				}
				var areaName=value.areaName;
				var option=$("<option/>").val(areaName).append(areaName);
				select2.append(option);
			});
   		}
	});
	//市下的区
	var select3=$("<select/>").attr("id","_town").hide();//默认为隐藏。
	if(areaType==4){
		$.ajax({
			type: "post",
   		url: "area_findCity.action",
   		data:"parentId="+cityId,
   		async:false,//默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
   		dataType:"json",
   		success: function(data){
     		var list=data.list;//取得回调的省的list.
			//遍历list.
			$.each(list,function(key,value){
				var areaName=value.areaName;
				var option=$("<option/>").val(areaName).append(areaName);
				select3.append(option);
			});
   		}
		});
		select3.show();//让select3显示。
	}
	var top=setTop+clientHeight+4;//定义要显示的DIV的top。
	//定义DIV的CSS串。
	var styleValue="padding:6px; background-color:#E3E3E3; font-size: 12px; border: 1px solid #777777;  position:absolute; z-index:1; visibility:visible;";
	styleValue+="top:"+top+"px; left:"+setLeft+"px";
	var button=$("<input/>").attr("type","button").attr("style","font-size:12px").attr("value","确定").attr("onClick","doSelect();");
	var span=$("<span/>").append(select1,select2,select3,button);
	$("#_contents").html(span.html()).attr("style",styleValue);
}
function doSelect() {
	value=$("#_pro").val()+$("#_city").val();
	if($("#_town").val()!=null){
		value+=$("#_town").val();
	}
	doSelectObj.value=value;
	document.getElementById("_contents").style.visibility = "hidden";
}
//查询市 或直辖市的区。
function selectCity(){
	var parentName=$("#_pro").val();
	var select2=$("#_city")
	select2.html("");//清空
	$.post("area_findAreaByName.action",{parentName:parentName},function(data){
		var list=data.list;//取得回调的省的list.
			//遍历list.
			$.each(list,function(key,value){
				if(key==0){//第一条记录。(默认被选中哦)
					cityId=value.id;
					areaType=value.areaType;//地区类型:0,国家。1,直辖市。2,省。3,直辖市下的区。4,省下市。5,市下区(县)
				}
				var areaName=value.areaName;
				var option=$("<option/>").val(areaName).append(areaName);
				select2.append(option);
			});
			selectTown();查询市下的区
	},"json");
}
//查询市下的区
function selectTown(){
	var parentName=$("#_city").val();
	var select3=$("#_town");
	select3.html("");//清空
		$.post("area_findAreaByName.action",{parentName:parentName},function(data){
		var list=data.list;//取得回调的省的list.
		if(list!=null){
			//遍历list.
			$.each(list,function(key,value){
				if(key==0){//第一条记录。(默认被选中哦)
					cityId=value.id;
					areaType=value.areaType;//地区类型:0,国家。1,直辖市。2,省。3,直辖市下的区。4,省下市。5,市下区(县)
				}
				var areaName=value.areaName;
				var option=$("<option/>").val(areaName).append(areaName);
				select3.append(option);
			});
			select3.show();
		}else{
			select3.hide();
		}
	},"json");
}
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值