ajax省市区三级联动

发布时间：2020-12-16 01:48:05 所属栏目：百科来源：网络整理

导读：area.html !DOCTYPEHTMLhtmlheadtitleajax/titlemetacharset="utf-8"/scripttype="text/javascript"varhttpAjax=newXMLHttpRequest();function$(id){returndocument.getElementById(id);}//获取省functiongetProvince(){httpAjax.onreadystatechange=functio

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);

?>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!