jquery省市县 三级联动_JAVA_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > JAVA > jquery省市县 三级联动

jquery省市县 三级联动

 2013/12/11 16:09:06  sungang_1120  程序员俱乐部  我要评论(0)
  • 摘要:$(document).ready(function(){getAreaByPid(0,"province");varprovince=$("#province");varcity=$("#city");varcounty=$("#county");//给省绑定事件,触发事件后填充市的数据$(province).bind("changekeyup",function(){varprovinceID=province.attr("value");$(city).find("option")
  • 标签:jQuery
class="js">		$(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>

?

?

发表评论
用户名: 匿名