`
sungang_1120
  • 浏览: 322123 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类

jquery省市县 三级联动

阅读更多
		$(document).ready(function(){

		getAreaByPid(0,"province");

			 var province = $("#province");
	         var city = $("#city");
	         var county = $("#county");

	       //给省绑定事件,触发事件后填充市的数据
	       $(province).bind("change keyup", function () {
	             var provinceID = province.attr("value");
	             $(city).find("option").remove();
	             if(provinceID != ''){
		             getAreaByPid(provinceID, "city");
		             city.css("display","block");
		             county.css("display","none");
		         }else{
		        	 city.css("display","none");
		             county.css("display","none");
			      }
	       });

	       //给市绑定事件,触发事件后填充区的数据
           $(city).bind("change keyup", function () {
               var cityID = city.attr("value");
              $(county).find("option").remove();
               if(cityID != ''){
	               getAreaByPid(cityID, "county");
	               county.css("display","block");
               }else{
            	   county.css("display","none");
                }
           });
           
		});

 

function getAreaByPid(pid,nodeid){
			var url = "/manager/config/getAreaByPid" ;
			var param = {
						"pid" : pid,
						"time" : Math.random()
						};
			$.post(url,param,function(data){
				if("province" == nodeid){
					$("#"+nodeid).append("<option  value=''>请选择省份...</option>");
				}
				if("city" == nodeid){
					$("#"+nodeid).append("<option  value=''>请选择市/区...</option>");
				}
				if("county" == nodeid){
					$("#"+nodeid).append("<option  value=''>请选择县...</option>");
				}
				for(var i=0;i<data.length;i++){
					$("#"+nodeid).append("<option  value='"+data[i].id+"'>"+data[i].name+"</option>");
				}
			});
		}

 

<div>
					<select id="province"></select>
					<select id="city" style="display: none;"></select>
					<select id="county" style="display: none;"></select>
				</div>

 

 

分享到:
评论

相关推荐

    jQuery省市县三级联动

    【jQuery省市县三级联动】是一种常见的前端交互设计,主要用于实现用户在选择省份时,自动更新市和县的下拉选项,以提供流畅的地理选择体验。这种技术在各种需要收集用户详细地址信息的Web应用中非常常见,如电商...

    jquery省市县三级联动.rar

    这个“jquery省市县三级联动.rar”压缩包文件提供了一个使用jQuery实现这种功能的示例。下面我们将详细探讨jQuery、省市县三级联动以及如何实现这一功能。 jQuery是一个广泛使用的JavaScript库,它简化了JavaScript...

    jquery省市县三级联动

    在IT行业中,"jQuery省市县三级联动"是一个常见的前端开发技术,主要应用于网页表单设计,尤其是涉及到地域选择时。这种技术使得用户在选择省份时,下拉菜单会自动更新对应的市、县(区)选项,提供了一种便捷的交互...

    jquery省市县三级联动的三个例子

    本主题聚焦于"jquery省市县三级联动的三个例子",这是一种常见且实用的前端技术,常用于创建动态下拉菜单,如在地址填写时自动填充省、市、县(区)信息。这种功能在电子商务网站、地图服务和各种在线表单中广泛使用...

    jquery省市县三级联动,可初始化

    在网页开发中,"jQuery省市县三级联动"是一种常见的功能,尤其在地址选择、订单填写等场景中广泛应用。这个功能允许用户在选择省份时,自动更新下拉菜单以显示对应的市和县,提供了便捷的用户体验。现在我们来深入...

    ASP+Jquery省市县三级联动

    ASP+Jquery省市县三级联动是一种常见的前端交互技术,常用于网页上的地址选择或筛选功能。这个技术结合了两种不同的编程语言和库:服务器端的ASP(Active Server Pages)和客户端的jQuery,实现了一个无需页面刷新就...

    jquery 省市县三级联动

    在网页开发中,"jQuery 省市县三级联动"是一个常见的功能需求,尤其在构建具有地域选择功能的网站时,如电商、招聘或物流系统。这个功能允许用户按顺序选择省份、城市和县(区),并且下一级的选择会根据上一级的...

    Jquery 省市区县三级联动代码

    首先,`可初始化省市县三级联动.html`是主页面,它包含了HTML结构以及Jquery脚本的引用。在这个HTML文件中,通常会有三个下拉列表,分别对应省份、城市和区县。每个下拉列表都有一个ID,例如`province`、`city`和`...

    省市想县三级联动下拉选/distpicker.js/jquery省市县三级联动插件

    "省市县三级联动下拉选/distpicker.js/jquery省市县三级联动插件"就是这样一个专门解决此类需求的工具。这个插件主要功能是为网页提供一个可以动态关联的省市县选择器,用户在选择省之后,市和县的下拉列表会根据所...

    jQuery 省市县三级联动所需的jar包

    这个"jQuery 省市县三级联动所需的jar包"应该包含了一些用于实现这一功能的资源和组件。 首先,我们来理解一下什么是省市县三级联动。在Web应用中,用户可能需要选择一个精确的地址,如中国境内的省、市、县。三级...

    ajax+Jquery省市县三级联动

    在网页开发中,"ajax+Jquery省市县三级联动"是一种常见的交互设计,它使得用户在选择省份时,城市和县区能实时更新而无需重新加载整个页面。这种技术极大地提升了用户体验,尤其在处理大量地区数据时,避免了频繁的...

    jquery省市区三级联动下拉菜单_select三级联动下拉菜单

    jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动...

    Jquery 省市县三级联动插件(三种总有一款适合你)

    在网页开发中,省市县三级联动是一个常见的需求,特别是在用户填写地址信息时。JQuery作为一款广泛使用的JavaScript库,提供了很多便利的API和插件来实现这种交互效果。本篇文章将详细探讨标题提及的三种Jquery插件...

    php+mysql+jquery省市区三级联动

    本项目“php+mysql+jquery省市区三级联动”是实现这一功能的一个实例,结合了后端PHP、数据库MySQL以及前端jQuery技术,提供了一个完整的解决方案。 首先,我们来看前端部分,这里使用的是jQuery库。jQuery是一个...

    jQuery-实现三级联动效果(省市县)

    在提供的压缩包文件"省市三级联动"中,应该包含了实现这一功能的HTML、CSS和JavaScript代码,你可以通过查看和学习这些代码来更好地理解这一过程。通过实际操作和调试,你将能掌握如何运用jQuery来实现类似的需求,...

    jQuery省市区三级联动

    在网页开发中,"jQuery省市区三级联动"是一种常见的交互设计,主要用于地址选择或区域筛选。这个功能使得用户能够方便地从省级、市级到区县级逐级选择,提高用户体验。以下将详细介绍该技术的核心概念、实现原理以及...

Global site tag (gtag.js) - Google Analytics