ajax省市区三级联动

area.html

<!DOCTYPE HTML>
<html>
	<head>
		<title> ajax </title>
		<meta charset="utf-8"/>
		<script type="text/javascript">
			var httpAjax = new XMLHttpRequest();
			function $(id){
				return document.getElementById(id);
			}
			// 获取省
			function getProvince(){
				httpAjax.onreadystatechange=function(){
					if(httpAjax.readyState == 4 && httpAjax.status == 200){
						var res = httpAjax.responseText;
						res = eval("("+res+")");
						var _html = "<option value=\"\">请选择...</option>";
						for(var i in res){
							_html += "<option value='"+res[i]['id']+"'>"+res[i]['name']+"</option>"
						}
						$("province").innerHTML = _html;
					}
				}
				httpAjax.open("post","area.php",false);
				httpAjax.setRequestHeader("content-TYPE","application/x-www-form-urlencoded");
				httpAjax.send("");
			}
			// 加载完毕  设置选择省
			window.onload=function(){
				getProvince();
			}
			// 获取市
			function getCity(pid){
				if(pid == ""){
					alert(1);
					$("city").innerHTML = "<option value=\"\">请选择...</option>";
					$("county").innerHTML = "<option value=\"\">请选择...</option>";
					return false;
				}
				$("county").innerHTML = "<option value=\"\">请选择...</option>";
				httpAjax.onreadystatechange=function(){
					if(httpAjax.readyState == 4 && httpAjax.status == 200){
						var res = httpAjax.responseText;
						res = eval("("+res+")");
						var _html = "<option value=\"\">请选择...</option>";
						for(var i in res){
							_html += "<option value='"+res[i]['id']+"'>"+res[i]['name']+"</option>"
						}
						$("city").innerHTML = _html;
					}
				}
				httpAjax.open("post","area.php",false);
				httpAjax.setRequestHeader("content-TYPE","application/x-www-form-urlencoded");
				var data = "id="+pid;
				httpAjax.send(data);
			}
			// 获取区县市
			function getCounty(cid){
				if(cid == ""){
					$("county").innerHTML = "<option value=\"\">请选择...</option>";
					return false;
				}
				httpAjax.onreadystatechange=function(){
					if(httpAjax.readyState == 4 && httpAjax.status == 200){
						var res = httpAjax.responseText;
						res = eval("("+res+")");
						var _html = "<option value=\"\">请选择...</option>";
						for(var i in res){
							_html += "<option value='"+res[i]['id']+"'>"+res[i]['name']+"</option>"
						}
						$("county").innerHTML = _html;
					}
				}
				httpAjax.open("post","area.php",false);
				httpAjax.setRequestHeader("content-TYPE","application/x-www-form-urlencoded");
				var data = "id="+cid;
				httpAjax.send(data);
			}
		</script>
	</head>
	<body style="padding:200px;">

			<select id="province" onchange="getCity(this.value)">
				<option value="">请选择...</option>
			</select>省
			<select id="city" onchange="getCounty(this.value)">
				<option value="">请选择...</option>
			</select>市
			<select id="county">
				<option value="">请选择...</option>
			</select>县/市/区
		
	</body>
</html>


area.php

<?php
	$pdo = new PDO("mysql:host=localhost;dbname=tk106","root","admin");
	$pdo->exec("set names utf8");

	$id = isset($_REQUEST['id']) ? $_REQUEST['id'] : "0";
	$sql = "select * from area where parentid=".$id;
	$data = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
	echo json_encode($data);

?>


你可能感兴趣的:(Ajax)