js原生Ajax实现三级联动下拉菜单省市区 代码

JavaScript代码:

<!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用的,纯js写出来基本样子就这样了。下面我们从后台进行获取数据将他显示在页面里面,我这主要是用的是PHP。

 

index.html

<!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>

 

selectDemo.php

下面是一个简单的后台,方便测试!shengList、shilist、qulist 完全可以从数据库直接查询出来。

<?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]);
    }
?>

 

效果:

Ajax实现三级联动下拉菜单

 

总结:

这种代码其实是有一个小缺点的,因为他每次Ajax请求都会直接把所有的“省、市、区”全部初始化一遍,如果你用了数据库,你就得全部查询出来;然后,后面再做一个判断是返回省,还是省+市,还是省+市+区。

 

我的建议是:数据这东西还是放在数据库是比较好的,需要的时候直接从后台调用出来,然后发给前端进行显示就好啦,也方便我们进行修改与操作,推荐大家看一下:

Ajax实现三级联动下拉菜单省市区(PHP+JavaScript)原生代码

这个不需要全部查询出来!

    A+
发布日期:2021年01月10日 02:32:37  所属分类:Ajax
最后更新时间:2021-01-10 02:32:37
评分: (2 票;平均数3.00 ;最高评分 5 ;用户总数2;总得分 6;百分比60.00)
付杰
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
  • ¥ 6.8元
  • 市场价:8.8元
数据科学与人工智能:必备数学基础
  • ¥ 298.0元
  • 市场价:398.0元
vue.js视频教程:全新 Vue.js 2.6 核心技术合集
  • ¥ 69.0元
  • 市场价:69.0元
刷流量 刷人气 刷点击 刷收藏 刷APP关键词
刷流量 刷人气 刷点击 刷收藏 刷APP关键词
  • ¥ 1.0元
  • 市场价:9.9元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: