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

随机推荐

centos7网卡名称修改以及配置
1.vi /etc/sysconfig/network-scripts/ifcfg-enoxxxxxx 为ifcfg-eth0并将里面的NAME项修改为eth0 2.禁用该可预测命名规则.在启动时传 ...
OpenStack local.conf
# Sample ``local.conf`` for user-configurable variables in ``stack.sh`` # NOTE: Copy this file to th ...
Python 魔术方法及调用方式
魔术方法调用方式解释 __new__(cls [,...]) instance = MyClass(arg1, arg2) __new__ 在创建实例的时候被调用 __init__(self [, ...
深入学习Hive应用场景及架构原理
Hive背景介绍 Hive最初是Facebook为了满足对海量社交网络数据的管理和机器学习的需求而产生和发展的.互联网现在进入了大数据时代,大数据是现在互联网的趋势,而hadoop就是大数据时代里的核 ...
Spring4.x、SpringMVC和DButils整合
tomcat 8.Spring 4.X.JDK1.8 需要jar包: 1)日志组件:log4j # debug < info < warn < error log4j.rootLog ...
JavaMail开发
---------------------------------------------发邮件------------------------------------------ 需要jar包: j ...
launchctl
Launchctl 系统启动时, 系统会以root用户的身份扫描/System/Library/LaunchDaemons和/Library/LaunchDaemons目录, 如果文件中有Disabl ...
Unity Download Assistant Error： 'SendRequest Error' while downloading ini file from http://files.unity3d.com/bootstrapper/29055738eb78/unity-5.3.6f1-win.ini
Unity 官网的哥们如此说道 I open the exe on Compatibility Mode , it's solved. You can try. :) 翻译就是我用兼容模式打开,就能 ...
C#获得字符串首字符字母（大写）
/// <summary> /// 获得字符串首字符字母(大写): /// </summary> /// <param name="cnChar"&g ...
JSTL，JQuery，Ajax，Json
JSTL 的定义 1 JSP 标准标签库 (JavaServerPage Standard Tag Library) 2 JSTL 通常会与EL 表达式合作实现JSP页面的编码 JSTL 的 ...

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

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

随机推荐

热门专题