js代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三级联动</title>
<style>
select{ width:150px; height:35px;}
</style>
</head>
<body>
<select class="sheng">
<option>请选择</option>
</select>
<span>省</span>
<select class="shi">
</select>
<span>市</span>
<select class="qu">
</select>
<span>区</span>
<script>
//获取到三个选择列表
var shengSelect =document.querySelector(".sheng");
var shiSelect =document.querySelector(".shi");
var quSelect =document.querySelector(".qu");
var shenglist=[‘广西壮族自治区‘,‘广东‘,‘湖北‘];
var shilist=[[‘南宁‘,‘桂林‘,‘柳州‘],[‘广州‘,‘深圳‘,‘东莞‘],[‘武汉‘,‘荆门‘,‘襄阳‘]];
var qulist=[
[[‘南1区‘,‘南2区‘,‘南3区‘],[‘桂1区‘,‘桂2区‘,‘桂3区‘],[‘柳1区‘,‘柳2区‘,‘柳3区‘]],
[[‘广1区‘,‘广2区‘,‘广3区‘],[‘深1区‘,‘深2区‘,‘深3区‘],[‘东1区‘,‘东2区‘]],
[[‘武1区‘,‘武2区‘,‘武3区‘],[‘荆1区‘,‘荆2区‘,‘荆3区‘],[‘襄1区‘,‘襄2区‘,‘襄3区‘]]
];
//选择省的下标
var shengIndex =0;
//加载省
for(var i=0;i<shenglist.length;i++){
var shengOption = new Option(shenglist[i]);
shengSelect.options.add(shengOption);
}
//选择省后加载市
shengSelect.onchange =function(eve){
shengIndex =eve.target.selectedIndex-1;
if(shengIndex == -1){
shiSelect.options.length= 0;
quSelect.options.length=0;
}else{
shiSelect.options.length= 0;
quSelect.options.length=0;
for(var j=0;j<shilist.length;j++){
var shiOption =new Option(shilist[shengIndex][j]);
shiSelect.options.add(shiOption);
}
//加载市的同时，加载第一个市的全部区
for(var k=0;k<qulist[shengIndex][0].length;k++){
var quOption =new Option(qulist[shengIndex][0][k]);
quSelect.options.add(quOption);
}
}
} //选择市后加载区
shiSelect.onchange=function(eve){
var shiIndex =eve.target.selectedIndex;
quSelect.options.length =0;
for(var n =0;n<qulist[shengIndex][shiIndex].length;n++){
var quOption =new Option(qulist[shengIndex][shiIndex][n]);
quSelect.options.add(quOption);
}
}
</script>
</body>
</html>
js写出来基本样子就这样了，下面我们从后台进行获取数据将他显示在页面里面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三级联动</title>
<style>
select{ width:150px; height:35px;}
</style>
</head>
<body>
<select class="sheng">
<option>请选择</option>
</select>
<span>省</span>
<select class="shi">
</select>
<span>市</span>
<select class="qu">
</select>
<span>区</span>
<script>
//获取到三个选择列表
var shengSelect =document.querySelector(".sheng");
var shiSelect =document.querySelector(".shi");
var quSelect =document.querySelector(".qu");
//var shenglist=[‘广西壮族自治区‘,‘广东‘,‘湖北‘];
//页面加载完成发送ajax请求，获取省数据
var shengIndex =0;
(function(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange =function(){
if(xhr.readyState==4){
if(xhr.status==200){
shenglist = JSON.parse(xhr.responseText);
//加载省
for(var i=0;i<shenglist.length;i++){
var shengOption = new Option(shenglist[i]);
shengSelect.options.add(shengOption);
}
}
}
}
xhr.open(‘get‘,‘selectDemo.php?type=0‘,true);
xhr.send();
}());
//点击省加载市
shengSelect.onchange =function(eve){
shengIndex =eve.target.selectedIndex-1;
if(shengIndex== -1){
shiSelect.options.length = 0;
quSelect.options.length = 0;
}else{
var xhr = new XMLHttpRequest();
xhr.onreadystatechange =function(){
if(xhr.readyState==4){
if(xhr.status==200){
//console.log(JSON.parse(xhr.responseText));
var success = JSON.parse(xhr.responseText);
var shilist =success[0];
shiSelect.options.length = 0;
for(var j=0;j<shilist.length;j++){
var shiOption = new Option(shilist[j]);
shiSelect.options.add(shiOption);
}
//加载市的同时加载第一个区
var qulist = success[1];
quSelect.options.length =0;
for(var n=0;n<qulist.length;n++){
var quOption = new Option(qulist[n]);
quSelect.options.add(quOption);
}
}
}
}
xhr.open(‘get‘,‘selectDemo.php?type=1&sheng=‘+shengIndex,true);
xhr.send();
}
}
//点击市加载区
shiSelect.onchange =function(eve){
shiIndex =eve.target.selectedIndex;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange =function(){
if(xhr.readyState==4){
if(xhr.status==200){
//console.log(JSON.parse(xhr.responseText));
var qulist = JSON.parse(xhr.responseText);
//shiSelect.options.length = 0;
quSelect.options.length =0;
for(var n=0;n<qulist.length;n++){
var quOption = new Option(qulist[n]);
quSelect.options.add(quOption);
}
}
}
}
xhr.open(‘get‘,‘selectDemo.php?type=2&sheng=‘+shengIndex+‘&shi=‘+shiIndex,true);
xhr.send();
}
</script>
</body>
</html>
下面是一个简单的后台，方便测试
<?php
$shengList = [‘广西壮族自治区‘,‘广东‘,‘湖北‘];
$shilist=[[‘南宁‘,‘桂林‘,‘柳州‘],[‘广州‘,‘深圳‘,‘东莞‘],[‘武汉‘,‘荆门‘,‘襄阳‘]];
$qulist=[[[‘南1区‘,‘南2区‘,‘南3区‘],[‘桂1区‘,‘桂2区‘,‘桂3区‘],[‘柳1区‘,‘柳2区‘,‘柳3区‘]],
[[‘广1区‘,‘广2区‘,‘广3区‘],[‘深1区‘,‘深2区‘,‘深3区‘],[‘东1区‘,‘东2区‘]],
[[‘武1区‘,‘武2区‘,‘武3区‘],[‘荆1区‘,‘荆2区‘,‘荆3区‘],[‘襄1区‘,‘襄2区‘,‘襄3区‘]]];
$type=$_GET[‘type‘];
if($type==0){
echo json_encode($shengList);
}elseif($type==1){
$shengInedx=$_GET[‘sheng‘];
$success = [$shilist[$shengInedx],$qulist[$shengInedx][0]];
echo json_encode($success);
}else if($type==2){
$shengInedx=$_GET[‘sheng‘];
$shinInedx=$_GET[‘shi‘];
echo json_encode($qulist[$shengInedx][$shinInedx]);
}
?>
效果图：
不过呢，数据这东西还是放在数据库是比较好的，需要的时候直接从后台调用出来，然后发给前端进行显示就好啦，也方便我们进行修改与操作
原文地址：https://www.cnblogs.com/royal6/p/10305993.html
时间： 2024-08-02 12:22:19