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

随机推荐

BestCoder Round #86 1001
链接http://acm.hdu.edu.cn/showproblem.php?pid=5804 题意:给你一些商店和他的商品价格,然后给你一个记账本,问你记大了就是1,否则是0 解法:模拟,注意测试 ...
007 Reverse Integer 旋转整数
Given a 32-bit signed integer, reverse digits of an integer.Example 1:Input: 123Output: 321Example ...
Oracle权限管理
一)用户Oracle中的用户分为二大类1)Oracle数据库服务器创建时,由系统自动创建的用户,叫系统用户,如sys.2)利用系统用户创建的用户,叫普通用户,如scott,hr,c##tiger,zh ...
MongoDB Linux 安装配置后台运行
介绍安装的文档很多,可以参考这篇: http://www.mkyong.com/mongodb/how-to-install-mongodb-on-mac-os-x/ 安装完后你可能会碰到的2个问题. ...
LR C语言语句复习，几个简单代码
嵌套循环 Action() { int i,j; ;i<=;i++) { ) beark; else lr_output_message("i=%d",i); ;j<= ...
<ganglia+nagios>rhel6.5
由于linux下的office和win下有所区别,我只能把linux下的.dot文件打包成pdf,粘贴发送标出来,但有些图片还是没办法发表,要是有朋友感兴趣的话,可加我qq 215687833具体的文 ...
Java学习笔记--继承和多态(上)
1.通过继承来开发超类(superclass) 2.使用super 关键词唤起超类的构造方法 3.在超类中覆盖方法 4.区分override和overload 5.在Object类中探索toStrin ...
Git常用操作命令收集
Git常用操作命令收集 1.进入本地仓库访问位置之后执行命令 1) 远程仓库相关命令检出仓库:$ git clone git://github.com/jquery/jquery.git 查看远 ...
七、SSR（服务端渲染）
使用框架的问题下载Vue.js 执行Vue.js 生成HTML页面(首屏显示,依赖于vue.js的加载) 以前没有前端框架时,用jsp/php在服务器端进行数据的填充,发送给客户端就是已经填充好的数 ...
原生js添加类名，删除类名
1.添加类名: document.getElementById("myDiv").classList.add('mystyle'); 2.删除类名: document.getEle ...

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

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

随机推荐

热门专题