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层中国地区省 ...

随机推荐

saltstack执行结果存储到MySQL
saltstack执行结果保存到MySQL中,以便进行命令安全审计必须是python2.7以上的环境安装相关模块ubuntu系统安装 apt-get install -y python-mysqldb ...
C# Task任务详解及其使用方式
https://blog.csdn.net/younghaiqing/article/details/81455410 C#多线程编程笔记(4.3)-Task任务中实现取消选项 https://blo ...
Unity 关于激活
DEDE修改注册邮箱时一起修改UCenter中用户邮箱的问题
最近在做一个项目,就是在账号安全栏目中加一个修改邮箱并验证的功能,这个功能并不复杂,可以参照用户注册时的邮箱验证来实现. 就是当用户更改邮箱并提交之后,发一封包含一个链接的邮件到用户的新邮箱中,当用户 ...
SpringBoot | 第十章：Swagger2的集成和使用
前言前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成.现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的沟 ...
bootstrap标签tab切换
<ul class="nav nav-tabs" id="myTab"> <li class="active">&l ...
Python开发环境Wing IDE设置Python路径详解
在使用Wing IDE的时候,Python源代码取决于PYTHONPATH(无论是外部或通过内部改变sys.path系统设置),用户需要将路径设置到Wing IDE中. 这个值可以从项目菜单和工具栏的 ...
Jscript 命名规范
变量命名都以类型前缀+有意义的单词组成,用驼峰式命名法增加变量和函式的可读性.例如:sUserName,nCount. 前缀规范:每个局部变量都需要有一个类型前缀,按照类型可以分为:s:表示字符串.例 ...
NEO
平台: Windows 类型: 虚拟机镜像软件包: .net core neo application server basic software blockchain neo open sourc ...
Hadoop之—— WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform...
[hadoop@hadoop000 hadoop]$ ldd --version ldd (GNU libc) 2.12 Copyright (C) Free Software Foundation, ...

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

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

随机推荐

热门专题