省市区的联动，相当常见

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

<!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. Failed to apply plugin [id 'com.gradle.build-scan']

    把spring源码clone下来之后,使用gradle编译不通过,异常日志如下: FAILURE: Build failed with an exception. * Where: Build fil ...

  2. Caused by: java.io.FileNotFoundException: class path resource

    异常: java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.test.c ...

  3. 【Codevs1993】草地排水（最大流，Dinic）

    题意:在农夫约翰的农场上,每逢下雨,Bessie最喜欢的三叶草地就积聚了一潭水.这意味着草地被水淹没了,并且小草要继续生长还要花相当长一段时间.因此,农夫约翰修建了一套排水系统来使贝茜的草地免除被大水 ...

  4. Scrapy学习-14-验证码识别

    3种实现方案   1. 编码实现 tesseract-ocr 谷歌开源的识别工具,自己实现代码编码,投入精力大,回馈低.且平台验证码更换周期短,编好的代码容易失效 2. 在线打码 在线平台提供,识别率 ...

  5. 本地安装Sass,Compass

    使用本地的gem文件来安装Sass和Compass. 1.安装Ruby http://rubyinstaller.org/downloads/ 下载之后双击安装即可,在安装过程中可以选择“Add Ru ...

  6. OpenLDAP给我的启发

    首先这篇文章没什么技术性,但亮点是:我会给广大运维同行提一点建议,这个一点仅仅是一点,而不是很多点. 年前计划深度掌握一些诸如:Jenkins.Gitlab.ELK.k8s等的软件,但学着学着总是想学 ...

  7. nfs详解及实现全网备份

    1.统一hosts cat /etc/hosts 172.16.1.5 lb01 172.16.1.6 lb02 172.16.1.7 web02 172.16.1.8 web01 172.16.1. ...

  8. android中添加只有border-left的样式

    如何在android中的边框添加只有左边边框有颜色的样式呢 1. 相应的drawable文件 <?xml version="1.0" encoding="utf-8 ...

  9. Redis - 事务操作与详解

    https://blog.csdn.net/J080624/article/details/81669560   写的比较清楚的一个帖子

  10. IDEA查看源码时提示：Library source does not match the bytecode for class的问题分析

    通过Maven查看依赖的源码时,通常是Maven自动下载JAR包附属的source包,但是会出现一个问题,由于使用lombok插件会造成编写的Java文件和编译后的class上有差别,所以IDEA打开 ...