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 ...
随机推荐
- vue-cli3 vue.config.js配置
module.exports = { // 基本路径 baseUrl: '', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lin ...
- HDU 2594 kmp算法变形
Simpsons’ Hidden Talents Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java ...
- 病毒（bzoj 2938）
Description 二进制病毒审查委员会最近发现了如下的规律:某些确定的二进制串是病毒的代码.如果某段代码中不存在任何一段病毒代码,那么我们就称这段代码是安全的.现在委员会已经找出了所有的病毒代码 ...
- 区间合并 POJ3667+HDU4553
两道题都是线段树的区间合并 lsum, rsum分别表示左/右端点 开始向右/左 符合条件的元素的最长连续长度 sum表示这个区间的符合条件的元素的最长连续长度 所以pushUp可写: void pu ...
- ibatis 字段类型为int时如何避免默认值得干扰
在xml文件中配置查询语句时,通常都是采用以下方法: <select id="getByExample" resultMap="PgWtResult" p ...
- css3 容器内容垂直居中
.item{ top: 50%; position: absolute; transform: translateY(-50%); /* 这里我们使用css3的transform来达到类似效果 */ ...
- 44深入理解C指针之---指针安全
一.指针安全:指针的声明和初始化问题 1.指针不恰当的声明: 1).声明的意思和真是的意图不一致,可以通过格式搞定: 2).使用宏定义时,展开的含义有变,通过格式搞定: 3).使用类型定义,使用更加方 ...
- (12)ubunto 快捷键
-----------------------------------------------------vi快捷键------------------------------------ 指令模式: ...
- Socks5代理Socks5 Proxy
Socks5代理Socks5 Proxy Socks5代理是基于Socks协议的一种代理模式.其中,5表示该协议的版本号.它可以让局域网的计算机通过socks5代理服务器,访问外网的内容.由于它工 ...
- 利用例子来理解spring的面向切面编程
最近学习了spring的面向切面编程,在网上看到猴子偷桃的例子,觉得这种方式学习比书本上讲解有趣多了,也便于理解.现在就来基于猴子偷桃写个基本的例子. maven工程: