`
wuhaidong
  • 浏览: 357754 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

三级联动 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");
}
 
分享到:
评论

相关推荐

    html5地区三级联动

    在构建三级联动的过程中,`&lt;select&gt;`元素是基础,用于创建下拉菜单,而`&lt;option&gt;`元素则表示下拉菜单中的选项。然而,由于移动端的用户体验需求,单纯使用`&lt;select&gt;`元素可能无法满足滑动选择的效果,所以我们需要...

    基于LayUI省市区三级联动

    在本文中,我们将深入探讨如何实现基于LayUI的省市区三级联动功能。LayUI是一个流行的前端开发框架,以其简洁、高效的特性受到广大开发者喜爱。三级联动在Web开发中常用于地址选择,用户在选择省份后,下拉菜单会...

    世界主要国家地区JS三级联动菜单

    为了创建和控制三级联动菜单,我们需要选取合适的HTML元素,如`&lt;select&gt;`或自定义的`&lt;div&gt;`结构,并利用DOM方法如`getElementById`、`querySelector`、`appendChild`等进行动态添加和修改。 2. **事件监听**:当...

    jquery +div 实现三级联动 ,可自定义样式

    在这个主题中,我们将深入探讨如何使用jQuery、AJAX、div以及CSS来实现一个可自定义样式的三级联动效果。 首先,让我们来看看传统的jQuery + AJAX + select实现的联动。在这个方法中,我们通常使用jQuery的事件监听...

    div模拟select框的实现省市联动三级和二级

    如果是三级联动,还会有区县的选择,同理也会根据上两级的选择进行更新。这种联动效果通常通过JavaScript或者jQuery等前端库来实现。 下面我们将分别介绍二级和三级联动的实现步骤: 1. **二级联动:** - **HTML...

    jQuery遮罩弹出地区二级和三级联动代码

    这个功能允许用户在点击按钮后,通过遮罩层弹出一个包含省份、城市、区县的三级联动菜单,用户可以逐级选择,提高用户体验。 首先,我们要理解这个功能的工作原理。在`index.html`文件中,通常会有一个触发弹出框的...

    jquery div模拟select表单地区选择三级联动美化效果

    本项目涉及的知识点是使用jQuery来模拟一个三级联动的地区选择表单,同时实现美化效果。这种方式通常用于创建更加用户友好的交互式界面,以替代传统的HTML `&lt;select&gt;` 元素。 一、jQuery基础 jQuery的核心是它的...

    地图三级联动以及各省各城市json文件

    地图三级联动是一种常见的数据可视化技术,常用于展示地理信息,如中国的省份、城市等层级关系。在本案例中,我们使用的是一种基于JavaScript的数据可视化库——ECharts,它提供了丰富的地图图表功能,包括自定义...

    jquery实现的水平三级联动

    在IT领域,尤其是在网页开发中,"jQuery实现的水平三级联动"是一种常见的交互设计,用于增强用户界面的交互性和信息的层次展示。本知识点主要涉及jQuery库的使用、HTML结构设计、CSS样式调整以及JavaScript事件处理...

    Layui省市三级联动.rar

    在IT领域,前端开发经常需要实现用户界面中的各种交互效果,比如省市三级联动菜单,它在注册、地址填写等场景中十分常见。本教程将详细讲解如何使用Layui框架来实现这一功能,同时结合jQuery进行操作,创建一个美观...

    js实现省市区三级联动非select下拉框版.docx

    在 HTML 结构中,我们使用 div 元素来创建下拉框的容器,并使用 section 元素来创建三级联动的省、市、区部分。每个部分都具有自己的类名,以便于后续的样式和交互处理。 知识点二:CSS 样式 在 CSS 样式中,我们...

    jquery 实现的省市区的三级联动的方法

    在网页开发中,经常需要实现省市区的三级联动效果,以提供用户选择地理位置的功能。这里我们主要探讨如何利用jQuery和Bootstrap这两个流行库来实现这一功能。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件...

    .net(C#)三级联动

    &lt;div&gt; 省:&lt;/span&gt;&lt;asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 市:&lt;/span&gt;&lt;asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True" ...

    js 导航 日历控件 省市区三级联动

    最后,"省市区三级联动"是指在表单中,当用户选择一个省份时,相关的城市会自动加载;选择城市后,对应的区县也会自动显示。这是一种典型的动态下拉列表,利用JavaScript根据用户的选择动态请求和填充数据,提升用户...

    HTML5手机端三级联动城市选择代码

    HTML5手机端三级联动城市选择代码是一种常见的网页交互设计,主要应用于移动设备上的地理选择功能。这个设计通常用于用户在填写表单时选择他们的省份、城市和区县,以提供精确的地理位置信息。以下是关于这一技术的...

    ajax三级联动

    总结,Ajax三级联动是一种提升用户体验的有效手段,无论是使用层还是下拉框,都可以通过异步加载数据,避免了页面的反复刷新。同时,通过Ajax进行登录验证也能提供即时反馈,增强了交互性。在实际开发中,我们需要...

    nuxt.js+mint-ui :省/市/区三级联动

    在本文中,我们将深入探讨如何使用Nuxt.js和Mint-UI实现省市区的三级联动。这个功能在许多Web应用中都很常见,特别是在涉及到地址选择的场景。首先,我们需要了解Nuxt.js和Mint-UI的基本概念,然后逐步介绍如何完成...

    div模拟下拉省市级联三级联动

    标题中的"div模拟下拉省市级联三级联动"是指在网页设计中,使用HTML的`&lt;div&gt;`元素来实现一个类似下拉选择框的效果,这个效果通常用于选择省份、城市和区县,形成一个三级联动的选择流程。在不支持或者需要兼容IE8...

    echarts地图省市区三级下钻联动

    在本文中,我们将深入探讨如何在Vue.js项目中实现基于ECharts的地图省市区三级下钻联动功能。ECharts是一款由百度开发的开源JavaScript可视化库,它提供了丰富的图表类型和强大的交互性,支持自定义地图,非常适合...

Global site tag (gtag.js) - Google Analytics