省市区的联动，相当常见

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

<!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. Java2WSDL 和 WSDL2Java（Axis）

    原文地址:https://www.ibm.com/developerworks/cn/webservices/ws-axisfaq/ 生成或取得WSDL文件 生成客户端或服务端代码 执行WSDL2Ja ...

  2. 关于scarpy的一些说明

    一  scrapy添加代理 1 内置代理:os.environ. 固定格式,不推荐 os.environ['http_proxy'] = "http://root:woshiniba@192 ...

  3. codeforces 900D 数论+组合+容斥原理

    问有多少个这样的数字序列 所有数的GCD等于x 并且 所有数的和等于y 题解: 非常难有思路啊 看题解后过的. 考虑序列GCD为x的倍数 即GCD = n*x 和当然都为y 这个条件不要忘了 这样我们 ...

  4. 【BZOJ入门3189】 猜数字（数学，搜索）

    Description 味味最近在玩猜数字的游戏,现在她也希望你来玩一下这个游戏.猜数字游戏的规则是这样的,告诉你一个正整数 n(2<=n<=11),然后味味心中会想一个 n 个数字组成的 ...

  5. Spring入门 （IOC）

    1.实现原理

  6. win8防火墙配置出站规则禁止QQ访问

    我们知道Windows自带防火墙可以自定义入站出站规则,那么今天我们就通过配置出站规则禁止QQ访问,在2015年少登QQ,多忙工作,登上人生巅峰,赢娶白富美,哈哈 首先,通过控制面板打开防火墙,可以看 ...

  7. js-利用插件qrcode.min.js，前端实时生成二维码

    qrcode.min.js <script type="text/javascript" src="js/jquery.min.js"></s ...

  8. Intellij从无到有创建项目

    Intellij虽然提供了很多模板可以创建maven web javaee等等各种项目,但是你知道项目从无到有到底怎么来的,各个配置分别是做什么的?现在就来一步步说明. 1.idea打开一个空文件夹: ...

  9. bzoj 3328 : PYXFIB

    Discription Input 第一行一个正整数,表示数据组数据 ,接下来T行每行三个正整数N,K,P Output T行,每行输出一个整数,表示结果 Sample Input 1 1 2 3 S ...

  10. 利用NSString的Hash方法比较字符串

    实际编程总会涉及到比较两个字符串的内容,一般会用 [string1 isEqualsToString:string2] 来比较两个字符串是否一致.对于字符串的isEqualsToString方法,需要 ...