省市区三级联动前端代码

$(function() {
		//页面初次加载时
		$.ajax({
			  type: "POST",
			  url: "${pageContext.request.contextPath}/findShengServlet?method=findSheng",
			  dataType: "json",
			  success: function(date) {
				 $(date).each(function() {
					 var s = "<option value='" + this.id + "'>" + this.name + "</option>";
					 $("#sheng").append($(s));
					 
				 });
			  }
		});
		//省改变时
		$("#sheng").change(function() {
			var value = $(this).prop("value");
			
			$.ajax({
				  type: "POST",
				  url: "${pageContext.request.contextPath}/findShengServlet?method=findShi",
				  data:{"value":value},
				  dataType: "json",
				  success: function(date) {
				     $("#shi").empty();
				     $("#shi").append($("<option value='-2'>请选择/市</option>")); 
					 $(date).each(function() {
						 var s = "<option value='" + this.id + "'>" + this.name + "</option>";
						 $("#shi").append($(s));
						 
					 });
				  }
			});
			//省改变市县必须改为空
			$("#xian").empty();
			$("#xian").append("<option value='-2'>请选择/市</option>");
		});
		//市改变时
		$("#shi").change(function() {
			var value = $(this).prop("value");
			$.ajax({
				  type: "POST",
				  url: "${pageContext.request.contextPath}/findShengServlet?method=findXian",
				  data:{"value":value},
				  dataType: "json",
				  success: function(date) {
				     $("#xian").empty();
				     $("#xian").append($("<option value='-2'>请选择/县</option>")); 
					 $(date).each(function() {
						 var s = "<option value='" + this.id + "'>" + this.name + "</option>";
						 $("#xian").append($(s));
						 
					 });
				  }
			});
		});
		/* */
	})

猜你喜欢

转载自blog.csdn.net/c1523456/article/details/80691156