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

    }

?>

效果图：

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

js原生实现三级联动下拉菜单的更多相关文章

  1. php+ajax的三级联动下拉菜单

    封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...

  2. ajax三级联动下拉菜单

    ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...

  3. ajax 实现三级联动下拉菜单

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  4. JS(JQuery) 省市区三级联动下拉选择

    引入 area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,i ...

  5. JS年月日三级联动下拉框日期选择代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js 联动下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. PHP用ajia代码写三级联动下拉

    下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquer ...

  8. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

  9. 项目总结01：JSP mysql SpringMvc下中国省市县三级联动下拉框

    JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP  mysql数据库  SpringMvc  ajax   Controller层  Service层  中国地区  省 ...

随机推荐

  1. Zabbix之CentOS7.3下yum安装Zabbix3.5

    Zabbix特点介绍 (此介绍来源于https://www.zabbix.com/documentation/3.4/zh/manual/introduction/features) 概述Zabbix ...

  2. rsync简单总结

    rsync是一个远程数据同步工具,算法是同步文件差异部分,因此针对非第一次同步传输速度快 (首次备份,没有复制优势)rsync作者:Andrew Tridgell 和 Paul Mackerras r ...

  3. Testing Round #12 B

    Description A restaurant received n orders for the rental. Each rental order reserve the restaurant ...

  4. 05.Spring 资源加载 - Resource

    基本概念 Spring 把所有能记录信息的载体,如各种类型的文件.二进制流等都称为资源. 对 Spring 开发者来说,最常用的资源就是 Spring 配置文件(通常是一份 XML 格式的文件). S ...

  5. (转)不看绝对后悔的Linux三剑客之grep实战精讲

    不看绝对后悔的Linux三剑客之grep实战精讲 原文:http://blog.51cto.com/hujiangtao/1923675 https://www.cnblogs.com/peida/a ...

  6. 这个五月，我拿到了腾讯暑期offer

    前情回顾 本来学校就是双非,如果再没有些亮点,是很难进大厂的. 我比较幸运,曾在网易实习过一段时间,很感谢这段经历,让我有幸通过腾讯HR们的简历筛选. 对于腾讯春招,其实我是没有参加网申(2.28-3 ...

  7. ElasticSearch2.2.0安装(win7)

    ElasticSearch2.2.0必须在jdk1.7上才可以启动起来哦. 一.ElasticSearch2.2.0安装 1.下载ElasticSearch2.2.0安装包 https://downl ...

  8. CentOS6.x升级MySQL 5.1到5.6

    有一些虚拟机.云主机提供商仍然使用的是老版本的安装套件.预装的应用软件版本很低.有些IDC使用的云服务器,其中MySQL预装版本为老版本5.1.x.而较新的MySQL 5.6版本在性能.功能.安全性等 ...

  9. 解决windows7系统的快捷方式无法添加到任务栏

    #以下4条,进入cmd命令界面下逐个执行cmd /k reg add "HKEY_CLASSES_ROOT\lnkfile" /v IsShortcut /fcmd /k reg ...

  10. lintcode中等难度5道题

    1.整数转罗马数字 对任一个罗马数字可以 由12个罗马字符进行加法操作完成,且大数在左,小数在右,可以将一个数字进行拆分来求解 2.买卖股票的最佳时机 II 可将问题转换为只要相连的两天prices[ ...