js原生实现三级联动下拉菜单

2024-03-29 17:50:52

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

效果图：

不过呢，数据这东西还是放在数据库是比较好的，需要的时候直接从后台调用出来，然后发给前端进行显示就好啦，也方便我们进行修改与操作

码农公寓

相关文章