省市区的联动，相当常见

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

<!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. 前端居中模板(常用HTML模板)

    0.效果:

  2. Install Qualcomm Development Environment

    安裝 Android Development Environment http://www.cnblogs.com/youchihwang/p/6645880.html 除了上述還得安裝, sudo ...

  3. Beyond compare vs kdiff3

    這裡使用的 kdiff3 版本是 0.9.98   基於以下 三點,最終選擇了 beyond compare   1. kdiff3 不能刪檔案,     以下為例,不能刪1   2. kdiff3 ...

  4. ARCGIS SDK For DotNet 路径

    ARCGIS SDK For DotNet 路径 驱动器 C 中的卷是 WIN7 卷的序列号是 06AC-BD3E C:\Program Files (x86)\ArcGIS\DeveloperKit ...

  5. hdu 4504(动态规划)

    威威猫系列故事——篮球梦 Time Limit: 300/100 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total ...

  6. Ui大屏

    http://www.uimaker.com/plus/view.php?aid=128661&pageno=1

  7. AC日记——Sign on Fence Codeforces 484e

    E. Sign on Fence time limit per test 4 seconds memory limit per test 256 megabytes input standard in ...

  8. AC日记——传纸条 洛谷 P1006

    题目描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了.幸运的是 ...

  9. js-压缩混淆工具 uglifyjs

    单个打包文件npm install uglify-js -g 使用uglifyjs压缩js uglifyjs 原始js文件 -m -c -o 压缩后js文件 uglifyjs 原始js文件 -b -c ...

  10. HDU 6464 权值线段树 && HDU 6468 思维题

    免费送气球 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submi ...