省市区的联动，相当常见

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

<!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. 【bzoj4031】[HEOI2015]小Z的房间 Matrix-Tree定理+高斯消元

    [bzoj4031][HEOI2015]小Z的房间 2015年4月30日3,0302 Description 你突然有了一个大房子,房子里面有一些房间.事实上,你的房子可以看做是一个包含n*m个格子的 ...

  2. Begin to study Deep Learning

    今天是儿童节,我开始了人生的新的阶段.借助这个节日我想在今年静下心来,简单执着的进行学习,不掺杂任何利益. 早上起来的比较晚,洗了床单吃了早午饭,背着书包就来到了公司.软件园里面很多游客,但是背着电脑 ...

  3. Linux Glibc幽灵漏洞紧急修补方案【转】

    转自:http://blog.csdn.net/chen19870707/article/details/43560823 幽灵漏洞是Linux glibc库上出现的一个严重的安全问题,他可以让攻击者 ...

  4. wpf GridControl selectAll UnSelect

    <Window x:Class="WpfApplication1.GridControlView" xmlns="http://schemas.microsoft. ...

  5. yii model层操作总结

    yii model层操作属性和方法总结. tableName – 设置Model所对应的表名,例如: public function tableName(){return 'gshop_order_e ...

  6. hdu 5444(构造二叉树然后遍历)

    Elven Postman Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  7. AC日记——拍照 洛谷 P3410

    题目描述 小B有n个下属,现小B要带着一些下属让别人拍照. 有m个人,每个人都愿意付给小B一定钱让n个人中的一些人进行合影.如果这一些人没带齐那么就不能拍照,小B也不会得到钱. 注意:带下属不是白带的 ...

  8. iOS应用内跳转百度高德苹果地图

    移动开发经常用到基于位置的一些导航功能,但是对于对导航功能依赖性不强的的应用,我们直接采用应用外跳转地图APP即可. 但是应用间跳转,首先需要设置白名单, 在iOS 9 下涉及到平台客户端跳转,系统会 ...

  9. [Python Cookbook] Numpy Array Joint Methods: Append, Extend & Concatenate

    数组拼接方法一 思路:首先将数组转成列表,然后利用列表的拼接函数append().extend()等进行拼接处理,最后将列表转成数组. 示例1: import numpy as np a=np.arr ...

  10. 浅析 rand7生成rand10 方法 之 思想篇（一）

    [问题描写叙述] rand7是一个能生成1-7的随机数.要求利用rand7生成1-10的随机数. [算法思想] 1.组合数学方法 第1次 1 2 3 4 5 6 7 之中用rand7取一个数 第2次从 ...