省市区的联动，相当常见

我就不写这么大数据的了，先写个简单的试一试

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

</head>

<body>

    <!--二级联动-->

    <div style="width:500px;margin:100px auto">

        <select id="oneDiv">

            <option selected>请选择</option>

            <option id="1">性别</option>

            <option id="2">种族</option>

            <option id="3">天赋</option>

        </select>

        <select id="childSelect">

            <option selected>请选择</option>

        </select>

    </div>

    <script>

        var Div = document.getElementById("oneDiv");

        Div.onchange = function () {

            var childLinkage = document.getElementById("childSelect");

            childLinkage.innerHTML = ""; // 每次进来先清空城市列表

            var divValue = this.value;

            var cities = [];

            switch (divValue) {

                case "请选择":

                    cities = ['请选择']

                    break;

                case "性别":

                    cities = ['男', '女']

                    break;

                case "种族":

                    cities = ['人族', '兽族', '妖族', '不死族']

                    break;

                case "天赋":

                    cities = ['敏捷', '耐力', '生命']

                    break;

            }

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

                var option = document.createElement('option'); //先创建option

                var textNode = document.createTextNode(cities[i]); //再把城市名作为子节点填入，也可用innerHTML

                option.appendChild(textNode);

                childLinkage.appendChild(option);

            }

        }

    </script>

</body>

</html>

JavaScript+Json写的二级联动的更多相关文章

  1. javascript实现的功能--二级联动

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

  2. 用原生JS写省市二级联动

    HTML代码 <select id="s1"> <option value="0">~请选择省份~</option> < ...

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

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

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

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

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

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

  6. Javascript中二级联动

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

  7. javascript二级联动

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

  8. JavaScript 实现省市二级联动

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

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

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

随机推荐

  1. [NOIP2017] 时间复杂度 (模拟,栈)

    题目链接 Solution 用栈进行模拟. 记录一个 \(map\) 来看循环变量有没有用过. 对于每一次入栈都加信息. 出栈直接将 \(top\) 减一下. 反正一堆乱七八糟的东西瞎搞... 注意条 ...

  2. websphere启用高速缓存导致问题

    环境:websphere 7 一个流程主页,里面include了上面这个页面,内部有一个iframe: 现象:项目发布在测试环境中,打开流程主页时,里面iframe内页显示不出来: 同样的jsp页面, ...

  3. java 时间戳与date转换

    1.时间戳转换为date long sjc=1442633777; SimpleDateFormat t = new SimpleDateFormat("yyyyMMddHHmmss&quo ...

  4. best corder MG loves gold

    MG loves gold  Accepts: 451  Submissions: 1382  Time Limit: 3000/1500 MS (Java/Others)  Memory Limit ...

  5. 致命错误：ext/standard/php_smart_str.h：没有那个文件或目录

    致命错误:ext/standard/php_smart_str.h:没有那个文件或目录 参考文章:https://blog.csdn.net/jartins/article/details/80371 ...

  6. UVA - 10196：Check The Check

    类型:简单模拟 大致题意:已知国际象棋行棋规则,给你一个局面,问是否将军?谁将谁的军?(保证不会同时将军) 思路:都以小写字母 测试 是否将 大写字母. 然后一个局面测两次(一次直接测,一次反转棋盘, ...

  7. HDU 5794 A Simple Chess（杨辉三角+容斥原理+Lucas定理）

    题目链接 A Simple Chess 打表发现这其实是一个杨辉三角…… 然后发现很多格子上方案数都是0 对于那写可能可以到达的点(先不考虑障碍点),我们先叫做有效的点 对于那些障碍,如果不在有效点上 ...

  8. springboot快速集成swagger

    今天技术总监说:小明,我们本次3.0改造,使用swagger2.0作为前后端分离的接口规范,它可以一键生成前后端的API,一劳永逸--小明:??? Spring Boot 框架是目前非常流行的微服务框 ...

  9. JDK1.8中的Lambda表达式和Stream

    1.lambda表达式 Java8最值得学习的特性就是Lambda表达式和Stream API,如果有python或者javascript的语言基础,对理解Lambda表达式有很大帮助,因为Java正 ...

  10. 第四章——SQLServer2008-2012资源及性能监控（1）专家

    http://blog.csdn.net/dba_huangzj/article/details/8614817