省市区的联动，相当常见

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

<!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. 推荐个PMP的内容，广州有需要的朋友可以参考看看

    慧翔天地PMP®培训机构简介 广州慧翔企业管理咨询有限公司注册于2012年8月14日,注册资金200万元人民币.实际上从2011年就已经开始从事PMP推广及教学工作(2010年曾代理智鼎东方华南市场, ...

  2. net9：图片变成二进制流存入XML文档，从XML文档中读出图片以及从XML文档中读取并创建图片文件

    原文发布时间为:2008-08-10 -- 来源于本人的百度文章 [由搬家工具导入] fileToXml类： using System;using System.Data;using System.C ...

  3. 机器人程序设计——之如何正确入门ROS | 硬创公开课（附视频/PPT）【转】

    转自:http://blog.exbot.net/archives/2966 导语:本期公开课面向想入手ROS却又不知从何下手的小伙伴,为大家梳理好学习思路. ROS和Android一样是开源的,功能 ...

  4. linux 程序自动运行总结

    1．开机启动时自动运行程序Linux加载后, 它将初始化硬件和设备驱动, 然后运行第一个进程init.init根据配置文件继续引导过程,启动其它进程.通常情况下,修改放置在 /etc/rc或 /etc ...

  5. Larevel5.1 打印SQL语句

    Larevel5.1 打印SQL语句 为了方便调试,开发时需要打印sql. 方法一(全局打开): SQL打印默认是关闭的, 需要在/vendor/illuminate/database/Connect ...

  6. AC日记——圆桌聚餐 cogs 729

    729. [网络流24题] 圆桌聚餐 ★★   输入文件:roundtable.in   输出文件:roundtable.out   评测插件时间限制:1 s   内存限制:128 MB «问题描述: ...

  7. Glide加载图片问题记录

    Glide加载图片相比于Picasso而言性能较好,又比Fresco轻巧,而且又支持加载gif动图,是Google 推荐.专注平滑的滚动.简单易用.可扩展的一款图片加载框架.但是使用时还是会遇到一些问 ...

  8. react-1 react需要的环境配置

    一.nodeJs简介和安装 1. 官网 https://nodejs.org/en/         NPM https://www.npmjs.com/ 2.检查安装成功的命令 node -v np ...

  9. java基础第三篇

    6.Java 中的容器(重点) a.变量:变量是一个容器,它存储的单个值 //int i=3; 1.局部变量:定义在方法中,没有默认值 2.成员变量:定义在类中方法外,这个事物的属性(特征)定义为成员 ...

  10. 四个很好的开源app项目

    Open Source and the iOS App Store Today, we are open-sourcing 4 iOS apps: ThatInbox, an email client ...