ajax省市区三级联动

area.html

<!DOCTYPEHTML>
<html>
	<head>
		<title>ajax</title>
		<Metacharset="utf-8"/>
		<scripttype="text/javascript">
			varhttpAjax=newXMLHttpRequest();
			function$(id){
				returndocument.getElementById(id);
			}
			//获取省
			functiongetProvince(){
				httpAjax.onreadystatechange=function(){
					if(httpAjax.readyState==4&&httpAjax.status==200){
						varres=httpAjax.responseText;
						res=eval("("+res+")");
						var_html="<optionvalue=\"\">请选择...</option>";
						for(variinres){
							_html+="<optionvalue='"+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();
			}
			//获取市
			functiongetCity(pid){
				if(pid==""){
					alert(1);
					$("city").innerHTML="<optionvalue=\"\">请选择...</option>";
					$("county").innerHTML="<optionvalue=\"\">请选择...</option>";
					returnfalse;
				}
				$("county").innerHTML="<optionvalue=\"\">请选择...</option>";
				httpAjax.onreadystatechange=function(){
					if(httpAjax.readyState==4&&httpAjax.status==200){
						varres=httpAjax.responseText;
						res=eval("("+res+")");
						var_html="<optionvalue=\"\">请选择...</option>";
						for(variinres){
							_html+="<optionvalue='"+res[i]['id']+"'>"+res[i]['name']+"</option>"
						}
						$("city").innerHTML=_html;
					}
				}
				httpAjax.open("post","application/x-www-form-urlencoded");
				vardata="id="+pid;
				httpAjax.send(data);
			}
			//获取区县市
			functiongetCounty(cid){
				if(cid==""){
					$("county").innerHTML="<optionvalue=\"\">请选择...</option>";
					returnfalse;
				}
				httpAjax.onreadystatechange=function(){
					if(httpAjax.readyState==4&&httpAjax.status==200){
						varres=httpAjax.responseText;
						res=eval("("+res+")");
						var_html="<optionvalue=\"\">请选择...</option>";
						for(variinres){
							_html+="<optionvalue='"+res[i]['id']+"'>"+res[i]['name']+"</option>"
						}
						$("county").innerHTML=_html;
					}
				}
				httpAjax.open("post","application/x-www-form-urlencoded");
				vardata="id="+cid;
				httpAjax.send(data);
			}
		</script>
	</head>
	<bodystyle="padding:200px;">

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

area.PHP

<?PHP
	$pdo=newPDO("MysqL:host=localhost;dbname=tk106","root","admin");
	$pdo->exec("setnamesutf8");

	$id=isset($_REQUEST['id'])?$_REQUEST['id']:"0";
	$sql="select*fromareawhereparentid=".$id;
	$data=$pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
	echojson_encode($data);

?>

原文链接：https://www.f2er.com/ajax/162702.html

ajax省市区三级联动

猜你在找的Ajax相关文章