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");
}
分享到:
相关推荐
在构建三级联动的过程中,`<select>`元素是基础,用于创建下拉菜单,而`<option>`元素则表示下拉菜单中的选项。然而,由于移动端的用户体验需求,单纯使用`<select>`元素可能无法满足滑动选择的效果,所以我们需要...
在本文中,我们将深入探讨如何实现基于LayUI的省市区三级联动功能。LayUI是一个流行的前端开发框架,以其简洁、高效的特性受到广大开发者喜爱。三级联动在Web开发中常用于地址选择,用户在选择省份后,下拉菜单会...
为了创建和控制三级联动菜单,我们需要选取合适的HTML元素,如`<select>`或自定义的`<div>`结构,并利用DOM方法如`getElementById`、`querySelector`、`appendChild`等进行动态添加和修改。 2. **事件监听**:当...
在这个主题中,我们将深入探讨如何使用jQuery、AJAX、div以及CSS来实现一个可自定义样式的三级联动效果。 首先,让我们来看看传统的jQuery + AJAX + select实现的联动。在这个方法中,我们通常使用jQuery的事件监听...
如果是三级联动,还会有区县的选择,同理也会根据上两级的选择进行更新。这种联动效果通常通过JavaScript或者jQuery等前端库来实现。 下面我们将分别介绍二级和三级联动的实现步骤: 1. **二级联动:** - **HTML...
这个功能允许用户在点击按钮后,通过遮罩层弹出一个包含省份、城市、区县的三级联动菜单,用户可以逐级选择,提高用户体验。 首先,我们要理解这个功能的工作原理。在`index.html`文件中,通常会有一个触发弹出框的...
本项目涉及的知识点是使用jQuery来模拟一个三级联动的地区选择表单,同时实现美化效果。这种方式通常用于创建更加用户友好的交互式界面,以替代传统的HTML `<select>` 元素。 一、jQuery基础 jQuery的核心是它的...
地图三级联动是一种常见的数据可视化技术,常用于展示地理信息,如中国的省份、城市等层级关系。在本案例中,我们使用的是一种基于JavaScript的数据可视化库——ECharts,它提供了丰富的地图图表功能,包括自定义...
在IT领域,尤其是在网页开发中,"jQuery实现的水平三级联动"是一种常见的交互设计,用于增强用户界面的交互性和信息的层次展示。本知识点主要涉及jQuery库的使用、HTML结构设计、CSS样式调整以及JavaScript事件处理...
在IT领域,前端开发经常需要实现用户界面中的各种交互效果,比如省市三级联动菜单,它在注册、地址填写等场景中十分常见。本教程将详细讲解如何使用Layui框架来实现这一功能,同时结合jQuery进行操作,创建一个美观...
在 HTML 结构中,我们使用 div 元素来创建下拉框的容器,并使用 section 元素来创建三级联动的省、市、区部分。每个部分都具有自己的类名,以便于后续的样式和交互处理。 知识点二:CSS 样式 在 CSS 样式中,我们...
在网页开发中,经常需要实现省市区的三级联动效果,以提供用户选择地理位置的功能。这里我们主要探讨如何利用jQuery和Bootstrap这两个流行库来实现这一功能。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件...
<div> 省:</span><asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 市:</span><asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True" ...
最后,"省市区三级联动"是指在表单中,当用户选择一个省份时,相关的城市会自动加载;选择城市后,对应的区县也会自动显示。这是一种典型的动态下拉列表,利用JavaScript根据用户的选择动态请求和填充数据,提升用户...
HTML5手机端三级联动城市选择代码是一种常见的网页交互设计,主要应用于移动设备上的地理选择功能。这个设计通常用于用户在填写表单时选择他们的省份、城市和区县,以提供精确的地理位置信息。以下是关于这一技术的...
总结,Ajax三级联动是一种提升用户体验的有效手段,无论是使用层还是下拉框,都可以通过异步加载数据,避免了页面的反复刷新。同时,通过Ajax进行登录验证也能提供即时反馈,增强了交互性。在实际开发中,我们需要...
在本文中,我们将深入探讨如何使用Nuxt.js和Mint-UI实现省市区的三级联动。这个功能在许多Web应用中都很常见,特别是在涉及到地址选择的场景。首先,我们需要了解Nuxt.js和Mint-UI的基本概念,然后逐步介绍如何完成...
标题中的"div模拟下拉省市级联三级联动"是指在网页设计中,使用HTML的`<div>`元素来实现一个类似下拉选择框的效果,这个效果通常用于选择省份、城市和区县,形成一个三级联动的选择流程。在不支持或者需要兼容IE8...
在本文中,我们将深入探讨如何在Vue.js项目中实现基于ECharts的地图省市区三级下钻联动功能。ECharts是一款由百度开发的开源JavaScript可视化库,它提供了丰富的图表类型和强大的交互性,支持自定义地图,非常适合...