<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>面向对象</title>

    <meta name="keywords" content="关键字列表" />

    <meta name="description" content="网页描述" />

    <link rel="stylesheet" type="text/css" href="" />

    <script>

        //定义省得相关信息

        var sheng=['请选择','广东省','湖南省','湖北省'];

        //定义是的相关信息

        var shi = [[],['广州市','东莞市','珠海市'],['长沙市','株洲市','湘潭市'],['武汉市','宜昌市','荆门市']];

        //封装一个DOM对象

        function $(id){

            return document.getElementById(id);

        }

        function createSheng(){

        //遍历一维数组

            for(var i in sheng){

            //定义op对象

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

                //追加元素到下拉列表

                $('sheng').options.add(op);

            }

        }

        function createShi(){

        //获取省得索引信息

            var index=$('sheng').selectedIndex;

            //清除市的下拉选框

            $('shi').length=0;

            //遍历市的相关信息

            for(var i in shi[index]){

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

                //追加元素

                $('shi').options.add(op);

            }

        }

        //定义一个window.onload事件

        window.onload=function(){

            createSheng();

            //触发事件

            $('sheng').onchange=createShi;

        }

    </script>

</head>

<body>

    <select id='sheng'></select>

    <select id='shi'></select>

</body>

</html>

javascript实现的功能--二级联动的更多相关文章

  1. JavaScript+Json写的二级联动

    省市区的联动,相当常见 我就不写这么大数据的了,先写个简单的试一试 <!DOCTYPE html> <html> <head> <title></ ...

  2. 利用Ajax和JSON实现关于查找省市名称的二级联动功能

    功能实现的思路:我们经常碰见网上购物时候填写收件地址会用到这个查找省市县的三级联动查找功能,我们可以利用Ajax和JSON技术模拟这个功能,说白了同样是使用Ajax的局部数据更新功能这个特性.因为省市 ...

  3. JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串，和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动

    JavaScript日历控件开发   概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...

  4. 利用JavaScript来实现省份—市县的二级联动

    所谓省-市二级联动是指当选择省份下拉选择框时,市县的下拉框会根据选择的省市而有相应的市县加载出来,如下图所示选择"上海市",城市的下拉选择框只会出现上海的市县: 这种二级联动非常常 ...

  5. javascript二级联动

    二级联动在一般的网页中随处可见,一般是地址,比如点击浙江省,随后出现的是杭州市,嘉兴市:点击北京省出现的是朝阳,海淀,而不是出现杭州,嘉兴. 要想实现这个步骤,就要用到javascript来实现.其中 ...

  6. JavaScript 实现省市二级联动

    JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...

  7. Javascript中二级联动

    主要使用到到了地址JSON格式,来做,没有涉及数据库的读取. <!DOCTYPE html><html><head> <meta charset=" ...

  8. 二级联动，三级联动，初学者，纯javascript，不含jQuery

    二级联动: html代码: <body> <select id="province" onchange="getCity(this.options.se ...

  9. 关于EasyUI查询功能的二级联动

    EasyUI 二级联动 data-options="multiple:true" 属性可实现对于车牌号的多选.

随机推荐

  1. poj 1094 Sorting It All Out(图论)

    http://poj.org/problem?id=1094 这一题,看了个大牛的解题报告,思路变得非常的清晰: 1,先利用floyd_warshall算法求出图的传递闭包 2,再判断是不是存在唯一的 ...

  2. [置顶] block一点也不神秘————如何利用block进行回调

    我们在开发中常常会用到函数回调,你可以用通知来替代回调,但是大多数时候回调是比通知方便的,所以何乐而不为呢?如果你不知道回调使用的场景,我们来假设一下: 1.我现在玩手机 2.突然手机没有电了 3.我 ...

  3. 开源ceph管理平台inkscope部署手册

    一.前情提要 关于inkscope就不做过多介绍了,就是ceph的一个开源管理控制平台,跟ceph官方的calamary以及intel的VSM差不多一类,只是各自侧重点不一样. 相对而言,因为inks ...

  4. new、delete与malloc、free的详解

    内容清单: 1．  C语言中的函数malloc和free 2．  C++中的运算符new和delete 3．  new/delete与malloc/free之间的联系和区别 4．  C/C++程序的内 ...

  5. 关于在App_Code文件夹自定义类中Session无法使用

    由于前台页面需要调用App_Code中自定义类的函数,但在自定义类中找不到Session,解决方法如下: 新建一个类session,并自己定义函数GetSession(),引用命名空间 System. ...

  6. 在 Visio 中录制宏

    在“开发工具”选项卡上,单击“录制宏”.(如果您看不到“开发工具”选项卡,请参阅下面的“显示‘开发工具’选项卡”.) 在“宏名”框中,键入宏名称. 在“快捷键”框中,键入与 Ctrl 键一起使用可运行 ...

  7. JavaScript知识（一）

    首先想为大家分享两句话: 侧耳听智慧,专心求聪明,呼求明哲,扬声求聪明.——箴言2:2-3 你要保守你心,胜过保守一切,因为一生的果效,是由心发出.——箴言 4:23 ...O(∩_∩)O...今天学 ...

  8. Windows 10 : 使用BCDboot恢复双系统启动

    电脑装上win10以后,立马把原来系统的启动信息删了.结果有个软件需要反激活,但是Win10已经没有Boot.ini这样的启动配置文件. 花了好多时间查找,发现这篇文章.实际操作倒是很简单.执行以下命 ...

  9. vi、vim 配置上下左右方向键和删除键

    vi.vim 配置上下左右方向键和删除键 " An example for a vimrc file. " " Maintainer: Bram Moolenaar &l ...

  10. Linux各个发行版本的介绍, 以及VirtualBox+CentOS的安装步骤

    Linux和Unix系统有哪些主要的发行版本 Unix: (非开源传统商业操作系统) IBM AIX, HP HP-UX, Sun Solaris,等 各家硬件厂商的发行版本, 往往是和自家的硬件设备 ...