<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

<!-- 实现效果：选择省会出现相应的县下拉框，同时市的下拉框改变-->
        <script type="application/javascript">

　　　　//二维数组存放市的信息
            var shi =[["丽水市","杭州市"],["新乡","郑州"]]; 
       　　//三维数组存放县的信息

　　　var xianes = [[["云和","景宁"],["桐庐","原阳"]],[["卫辉","下乡"],["中原","二七"]]];
            //所选的省值

　　　　var proIndex = 0;
            function sgc(){
               //获得所选择的省的下拉框值

　　　　 var pro = document.getElementById("sheng");
              //获得市的下拉框

　　　　var cit = document.getElementById("shi");
              //将省的value与市的一维数组下标所对应

　　　　proIndex = pro.value-1;

　　　　//清空市下拉框中原有的值
                cit.options.length = 1;
                //通过for循环往下拉框中添加市的信息
                for(var i = 0;i < shi[proIndex].length;i++){
                    var op = document.createElement("option");
                    var citName = document.createTextNode(shi[proIndex][i]);
                    op.value = i;
                    op.appendChild(citName);
                    cit.appendChild(op);                    
                }            
            }

　　　//市的值改变后改变县的值
            function sic(){
                var are = document.getElementById("xian");
                var cit = document.getElementById("shi");
                are.options.length = 1;

　　　　//通过proIndex获得所选的省的值作为县的数组的一维数组下标，通过cit.value作为县数组的二维数组下标，遍历获得数组值
                for(var i = 0;i<xianes[proIndex][cit.value].length;i++){
                    var op = document.createElement("option");
                    var areName = document.createTextNode(xianes[proIndex][cit.value][i]);
                    op.value = i;
                    op.appendChild(areName);
                    are.appendChild(op);
                }
            }
        </script>

　　//onchange():控件的value值改变后调用方法
        <select id = "sheng" onchange = "sgc();">
            <option>----省份---</option>
            <option value = "1">浙江省</option>
            <option value = "2">河南省</option>
        </select>
        <select id = "shi" onchange="sic();">
            <option>---市区---</option>
        </select>
        <select id = "xian" >
            <option>---县区---</option>
        </select>
    </body>
</html>

三级级联(js实现)的更多相关文章

  1. KendoUi中KendoDropDownList控件的使用——三级级联模块的实现

    1. 应用需求 在权限系统开发中除了以上数据表关系的设计之外.比較麻烦的地方是级联模块在页面的展示,因为设计中最多是控制到三级,因此三级级联模块的展示.编辑等页面操作是须要解决的问题,这里採用Kend ...

  2. 对jQuery ajax三级级联的简单研究

    最近写程序的时候经常遇到使用ajax获取数据的问题,刚好昨天遇到ajax写三级级联问题,自己写了一个简单的级联.对于服务端获取数据的就不多写了,客户端的ajax发送请求我在这里详细说一下,因为我也没专 ...

  3. zTree实现地市县三级级联DAO接口实现

    zTree实现地市县三级级联DAO接口实现 ProvinceDaoImpl.java: /** * @Title:ProvinceDaoImpl.java * @Package:com.gwtjs.d ...

  4. zTree实现地市县三级级联报错（一）

    zTree实现地市县三级级联 1.详细报错例如以下: java.lang.IllegalStateException: Failed to load ApplicationContext at org ...

  5. 关于时间的操作（JavaScript版）——年月日三级级联（默认依次显示请选择年、请选择月和请选择日）

    这篇博客和前一篇博客基本同样,仅仅是显示的默认值不同: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&quo ...

  6. zTree实现地市县三级级联Action类

    zTree实现地市县三级级联Action类 ProvinceAction.java: /** * @Title:ProvinceAction.java * @Package:com.gwtjs.str ...

  7. zTree实现地市县三级级联Service接口測试

    zTree实现地市县三级级联Service接口測试 ProvinceServiceTest.java: /** * @Title:ProvinceServiceTest.java * @Package ...

  8. 三级级联查询省份名称和编码（保证名称不重复）的SQL语句

    三级级联查询省份名称和编码(保证名称不重复)的SQL语句 1.省份.地市和县级数据库表 2.SQL语句 SELECT DISTINCT t.`province_name`,t.`province_co ...

  9. zTree实现地市县三级级联报错（三）

    zTree实现地市县三级级联报错(三) 1.具体报错如下 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] ...

随机推荐

  1. Pandas 时间序列处理

    目录 Pandas 时间序列处理 1 Python 的日期和时间处理 1.1 常用模块 1.2 字符串和 datetime 转换 2 Pandas 的时间处理及操作 2.1 创建与基础操作 2.2 时 ...

  2. 11-jQuery简介和选择器

    # jQuery > jQuery是一个是免费.开源的javascript库, 也是目前使用最广泛的javascript函数库.>> jQuery极大的方便你完成web前段的相关操作 ...

  3. 从0构建webpack开发环境(一) 一个简单webpack.config.js

    本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...

  4. js url传参，参数加密

    前台 function encode64(input) { var output = ""; var base = new Base64(); var output = base. ...

  5. 2019-8-14-win10-使用-SMB-v1

    title author date CreateTime categories win10 使用 SMB v1 lindexi 2019-08-14 08:55:55 +0800 2018-2-13 ...

  6. tmux 操作简版

    操作session: 操作window: 操作pane: 原文

  7. 【学习】006数据交换格式与SpringIOC底层实现

    课程目标 XML和JSON Java反射机制 手写SpringIOC 什么是数据交换格式 客户端与服务器常用数据交换格式xml.json.html 数据交换格式用场景 移动端(安卓.IOS)通讯方式采 ...

  8. gcc的-D,-w,-W,-Wall,-O3这些参数的意义

    一.-D 其意义是添加宏定义,这个很有用. 当你想要通过宏控制你的程序,不必傻乎乎的在程序里定义,然后需要哪个版本,去修改宏. 只需要在执行gcc的时候,指定-D,后面跟宏的名称即可. 示例: gcc ...

  9. Vue 组件间的传值（通讯）

    组件之间的通讯分为三种 父给子传 子给父传 兄弟组件之间的通讯 1 父组件给子组件传值 子组件嵌套在父组件内部,父组件给子组件传递一个标识,在子组件内部用props接收,子组件在模板里可以通过{{}} ...

  10. Windows电脑无法识别USB设备怎么办？

    您可能已经注意到,如果您使用USB设备并将其插入计算机,Windows会识别并配置它.然后,如果你拔掉它并将其重新插入另一个USB端口,Windows就会出现一连串的健忘症,并认为这是一个完全不同的设 ...