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

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原生实现三级联动下拉菜单的更多相关文章

php+ajax的三级联动下拉菜单
封装一个三级联动,就可以在任何页面进行引用了先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...
ajax三级联动下拉菜单
ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...
ajax 实现三级联动下拉菜单
ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式比如 ...
JS(JQuery) 省市区三级联动下拉选择
引入 area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,i ...
JS年月日三级联动下拉框日期选择代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
js 联动下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
PHP用ajia代码写三级联动下拉
下面是我做三级联动下拉的步骤以及逻辑第一步:先做一个省市区表格第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquer ...
jQuery cxSelect 多级联动下拉菜单
随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...
项目总结01：JSP mysql SpringMvc下中国省市县三级联动下拉框
JSP mysql SpringMvc下中国省市县三级联动下拉框关键词 JSP mysql数据库 SpringMvc ajax Controller层 Service层中国地区省 ...

随机推荐

oracle(三)
/****************************表空间 start****************************/ --表空间的作用 /** 1.决定数据库实体的空间分配 2.设置 ...
Linux定时清理30天前的Tomcat日志脚本
一.在tomcat的log路径下新建.sh脚本文件clean.sh,内容如下:#!/bin/bashlogs_path="/mnt/tomcat/apache-tomcat-8.5.23/l ...
弹层组件文档 - layui.layer
http://www.layui.com/doc/modules/layer.html
mask
select ) as cnt from ( ' as flag union all select 'a' as flag union all select null as flag ) t0 ; s ...
转 xshell 图像化展示
http://www.cnblogs.com/kellyseeme/p/7965830.html 限制: 无法显示通过堡垒机登录的机器的图形接界面. 只能显示直接登录的服务到期的图像化界面 Xshel ...
C# 枚举类型 enum （一）
1.枚举使用enum关键字来声明,与类同级.枚举可以和类并列也可以写在类里面,不能写在方法里. 2.枚举是值类型,隐式继承自System.Enum,不能手动修改. System.Enum本身是引用类 ...
Linux Shell命令系列(3)
11. chown命令 “chown”命令就是改变文件拥有者和所在用户组.每个文件都属于一个用户组和一个用户.在你的目录下,使用"ls -l",你就会看到像这样的东西.root@t ...
Linux系统配置双网卡绑定bond0
1.bonding简述双网卡配置设置虚拟为一个网卡实现网卡的冗余,其中一个网卡坏掉后网络通信仍可正常使用,实现网卡层面的负载均衡和高可用性.现在一般的企业都会使用双网卡接入,这样既能添加网络带宽,同 ...
RAID磁盘分区的创建
RAID(Reduntant Arrays of Independent Disks),即独立冗余磁盘阵列. RAID的级别: Raid 0: 条带 Raid 1: 镜像 Raid 2,3,4,5 等 ...
Hive 基本语法操练（三）：分区操作和桶操作
(一)分区操作 Hive 的分区通过在创建表时启动 PARTITION BY 实现,用来分区的维度并不是实际数据的某一列,具体分区的标志是由插入内容时给定的.当要查询某一分区的内容时可以采用 WHER ...

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

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

随机推荐

热门专题