JS制作简单的三级联动


Posted in Javascript onMarch 18, 2015

用javascript制作的一个简单三级联动,非常简单实用

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        省:

        <select style="width: 100px;" id="pre" onchange="chg(this);">

            <option value="-1">请选择</option>

        </select>

        市:

        <select style="width: 100px;" id="city" onchange="chg2(this)" ;></select>

        区:

        <select style="width: 100px;" id="area"></select>

    </body>

    <script>

         //声明省

        var pres = ["北京", "上海", "山东"]; //直接声明Array

         //声明市

        var cities = [

            ["东城", "昌平", "海淀"],

            ["浦东", "高区"],

            ["济南", "青岛"]

        ];

        var areas = [

                [

                    ["东城1", "东城2", "东城3"],

                    ["昌平1", "昌平2", "昌平3"],

                    ["海淀1", "海淀2", "海淀3"]

                ],

                [

                    ["浦东1", "浦东2", "浦东3"],

                    ["高区1", "高区2", "高区3"]

                ],

                [

                    ["济南1", "济南2"],

                    ["青岛1", "青岛2"]

                ]

            ]

            //设置一个省的公共下标

        var pIndex = -1;

        var preEle = document.getElementById("pre");

        var cityEle = document.getElementById("city");

        var areaEle = document.getElementById("area");

         //先设置省的值

        for (var i = 0; i < pres.length; i++) {

            //声明option.<option value="pres[i]">Pres[i]</option>

            var op = new Option(pres[i], i);

            //添加

            preEle.options.add(op);

        }

        function chg(obj) {

            if (obj.value == -1) {

                cityEle.options.length = 0;

                areaEle.options.length = 0;

            }

            //获取值

            var val = obj.value;

            pIndex = obj.value;

            //获取ctiry

            var cs = cities[val];

            //获取默认区

            var as = areas[val][0];

            //先清空市

            cityEle.options.length = 0;

            areaEle.options.length = 0;

            for (var i = 0; i < cs.length; i++) {

                var op = new Option(cs[i], i);

                cityEle.options.add(op);

            }

            for (var i = 0; i < as.length; i++) {

                var op = new Option(as[i], i);

                areaEle.options.add(op);

            }

        }

        function chg2(obj) {

            var val = obj.selectedIndex;

            var as = areas[pIndex][val];

            areaEle.options.length = 0;

            for (var i = 0; i < as.length; i++) {

                var op = new Option(as[i], i);

                areaEle.options.add(op);

            }

        }

    </script>

</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
两个Javascript小tip资料
Nov 23 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
webpack3之loader全解析
Oct 26 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 #Javascript
javascript版2048小游戏
Mar 18 #Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 #Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 #Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 #Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 #Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 #Javascript
You might like
PHP MSSQL 分页实例
2016/04/13 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
详细介绍Python函数中的默认参数
2015/03/30 Python
python保存字符串到文件的方法
2015/07/01 Python
Python回调函数用法实例详解
2015/07/02 Python
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
python中zip()方法应用实例分析
2016/04/16 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
html5的localstorage详解
2017/05/09 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
户外活动策划方案
2014/03/12 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
家长会学生演讲稿
2014/04/26 职场文书
暑期培训班招生方案
2014/08/26 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书