jquery省市县三级联动

最新推荐文章于 2024-07-21 02:56:05 发布

sungang1120

最新推荐文章于 2024-07-21 02:56:05 发布

阅读量91

点赞数

分类专栏：细细品味-Jquery 细细品味-Javascrip 文章标签： js jquery ViewUI

本文链接：https://blog.csdn.net/sungang1120/article/details/84511402

版权

细细品味-Jquery 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

细细品味-Javascrip

27 篇文章 0 订阅

订阅专栏

		$(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>