JavaScript+Json写的二级联动
省市区的联动，相当常见
我就不写这么大数据的了，先写个简单的试一试
<!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写的二级联动的更多相关文章
- javascript实现的功能--二级联动
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" ...
- 用原生JS写省市二级联动
HTML代码 <select id="s1"> <option value="0">~请选择省份~</option> < ...
- JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串，和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动
JavaScript日历控件开发 概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...
- 利用Ajax和JSON实现关于查找省市名称的二级联动功能
功能实现的思路:我们经常碰见网上购物时候填写收件地址会用到这个查找省市县的三级联动查找功能,我们可以利用Ajax和JSON技术模拟这个功能,说白了同样是使用Ajax的局部数据更新功能这个特性.因为省市 ...
- 利用JavaScript来实现省份—市县的二级联动
所谓省-市二级联动是指当选择省份下拉选择框时,市县的下拉框会根据选择的省市而有相应的市县加载出来,如下图所示选择"上海市",城市的下拉选择框只会出现上海的市县: 这种二级联动非常常 ...
- Javascript中二级联动
主要使用到到了地址JSON格式,来做,没有涉及数据库的读取. <!DOCTYPE html><html><head> <meta charset=" ...
- javascript二级联动
二级联动在一般的网页中随处可见,一般是地址,比如点击浙江省,随后出现的是杭州市,嘉兴市:点击北京省出现的是朝阳,海淀,而不是出现杭州,嘉兴. 要想实现这个步骤,就要用到javascript来实现.其中 ...
- JavaScript 实现省市二级联动
JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...
- 二级联动，三级联动，初学者，纯javascript，不含jQuery
二级联动: html代码: <body> <select id="province" onchange="getCity(this.options.se ...
随机推荐
- 百度网络监控实战：NetRadar横空出世（下）
原文:https://mp.weixin.qq.com/s/CvCs-6rX8Lb5vSTSjYQaBg 转自订阅号「AIOps智能运维」,已授权运维帮转发 作者简介:运小贝,百度高级研发工程师 负责 ...
- 2018.8.7 Noip2018模拟测试赛（二十）
日期: 八月七号 总分: 300分 难度: 提高 ~ 省选 得分: 100分(呵呵一笑) 题目列表: T1:SS T2:Tree Game T3:二元运算 赛后反思: Emmmmmm…… 开 ...
- Bzoj2038 小Z的袜子(hose)
Time Limit: 20000MS Memory Limit: 265216KB 64bit IO Format: %lld & %llu Description 作为一个生活散漫 ...
- net6：用户添加到角色和移出角色，角色的创建与删除等Roles与Membership的使用
原文发布时间为:2008-07-30 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...
- 学习javascript设计模式之装饰者模式
1.装饰者模式定义:给对象动态添加职责的方式称为装饰者(decorator)模式. js如何实现装饰者模式 通过保存原函数引用方式改写某函数 window.onload = function(){al ...
- POJ 2577: Interpreter
简略解题报告 Description A certain computer has 10 registers and 1000 words of RAM. Each register or RAM l ...
- Java通过开启线程池实现多线程
计算1..100 和1...200 的和,使用线程池开启两个线程 调用Executors类的newFixedThreadPool方法参数是线程池容纳的线程数量 这里是2 返回的对象是 Executo ...
- [react-router] 平时积累
path通配符: <Route path="/hello/:name"> // 匹配 /hello/michael // 匹配 /hello/ryan <Rout ...
- 松鼠的新家（lca）
洛谷—— P3258 [JLOI2014]松鼠的新家 题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到达,且俩个房间之间的路线都是唯一的 ...
- 信号板拼包：数组方式（bug长度只是截短，并未清空，若之后拷贝数据长度小于之前数据长度，老数据会接在后面）
class SignalobardMsgReadHandler : public SessionVectChar::ReadHandler{public: SignalobardMsgReadHan ...