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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 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
香妃
2021/03/03 冲泡冲煮
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
Smarty3配置及入门语法
2017/02/22 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
关于python写入文件自动换行的问题
2018/06/23 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
django中间键重定向实例方法
2019/11/10 Python
pandas中ix的使用详细讲解
2020/03/09 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
住宅质量保证书
2014/04/29 职场文书
煤矿安全生产标语
2014/06/06 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
推普标语口号大全
2015/12/26 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
python识别围棋定位棋盘位置
2021/07/26 Python
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers