在调用时才从后台取数据
从后台取数据时根据请求参数获得对应具体数据
前台:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
select{
width:200px;
height:35px;
}
</style>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<span>省:</span>
<select name="" id="" class="sheng">
<option value="">请选择</option>
</select>
<span>市:</span>
<select name="" id="" class="shi">
</select>
<span>区:</span>
<select name="" id="" class="qu">
</select>
<script>
var shengSelect=document.querySelector(".sheng");
var shiSelect=document.querySelector(".shi");
var quSelect=document.querySelector(".qu");
var shengIndex=0;
var shiIndex=0;
//页面加载完成,发送ajax请求省数据,获得省下拉框填充内容
(function(){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if(xhr.readyState==4)
{
if(xhr.status==200)
{
var shengList=JSON.parse(xhr.responseText);
for(var i=0;i<shengList.length;i++)
{
var shengOption=new Option(shengList[i]);
shengSelect.options.add(shengOption);
}
}
}
};
//get请求传参,0省,1市,2区
xhr.open('get','3.php?type=0',true);
xhr.send(null);
}());
//选择省,加载市
shengSelect.onchange=function(event)
{
shengIndex=event.target.selectedIndex-1;
var event=event||window.event;
//获取市的数据
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if(xhr.readyState==4)
{
if(xhr.status==200)
{
var shiList=JSON.parse(xhr.responseText);
//在市的数据回来时执行,并且传参传入对应省的下标,返回对应下标数据
if(shengIndex==-1)
{
console.log("请选择省");
shiSelect.options.length=0;
quSelect.options.length=0;
}else{
shiSelect.options.length=0;
for(var i=0;i<shiList.length;i++)
{
var shiOption=new Option(shiList[i]);
shiSelect.options.add(shiOption);
}
//获取区的数据,此时是为了选择市的时候,显示市所对应的第一个区
var xhr2=new XMLHttpRequest()
xhr2.onreadystatechange=function()
{
if(xhr2.readyState==4)
{
if(xhr2.status==200)
{
var quList=JSON.parse(xhr2.responseText);
quSelect.options.length=0;
for(var i=0;i<quList.length;i++)
{
var quOption=new Option(quList[i]);
quSelect.options.add(quOption);
}
}
}
}
xhr2.open('get','3.php?type=2&sheng='+shengIndex,true);
xhr2.send(null);
}
}
}
};
//get请求传参,0省,1市,2市所对应第一个区,3区
xhr.open('get','3.php?type=1&sheng='+shengIndex,true);
xhr.send(null);
}
//选择市,加载区
shiSelect.onchange=function(event)
{
shiIndex=event.target.selectedIndex;
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if(xhr.readyState==4)
{
if(xhr.status==200)
{
var quList=JSON.parse(xhr.responseText);
console.log(quList);
quSelect.options.length=0;
for(var i=0;i<quList.length;i++)
{
var quOption =new Option(quList[i]);
quSelect.options.add(quOption);
}
}
}
}
xhr.open('get','3.php?type=4&sheng='+shengIndex+"&"+"shi="+shiIndex,true);
xhr.send(null);
}
</script>
</body>
</html>
后台:
<?php
$type=$_GET['type'];
$shengList=['河北','黑龙江','哈尔滨'];
$shiList=[['保定','石家庄'],['大庆','齐齐哈尔'],['尔滨','商丘']];
$quList=[[['保定1','保定2'],["石1","石2"]],[["庆1","庆2","庆3"],["齐1","齐2"]],[["哈1","哈3"],["商丘1","商丘2"]]];
if($type==0)
{
echo json_encode($shengList);
}else if($type==1)
{
$shengIndex=$_GET['sheng'];
echo json_encode($shiList[$shengIndex]);
}else if($type==2){
$shengIndex=$_GET['sheng'];
echo json_encode($quList[$shengIndex][0]);
}else{
$shengIndex=$_GET['sheng'];
$shiIndex=$_GET['shi'];
echo json_encode($quList[$shengIndex][$shiIndex]);
}
?>