JS案例六_2:省市级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市级联动</title>
<script>
//1.定义一个二维数组存储省市信息
var city = new Array(3);
city[0] = new Array("长沙市","株洲市","湘潭市","衡阳市","岳阳市","常德市","张家界市","郴州市","永州市","邵阳市","娄底市","怀化市","益阳市","湘西土家图苗族自治州");
city[1] = new Array("武汉市","黄石市","十堰市","宜昌市","襄樊市","鄂州市","荆门市","孝感市","荆州市","黄冈市","天门市");
city[2] = new Array("黄浦区","卢湾区","徐汇区","长宁区","金山区","虹口区");
city[3] = new Array("广东市","深圳市","珠海市","清远市");
//2.将所选的省和数组中的省进行匹配
function changeCity(val) {
//6.获取下一个select节点
var selectNode = document.getElementById("cities");
// alert("111");
//8.在每次重新选择后,将第二个下拉框中的数据清除。
selectNode.length = 0;
for(var i = 0;i<city.length;i++) {
if(val == i) {
for(var j =0;j<city[i].length;j++){
//3.创建option节点
var opNode = document.createElement("option");
//4.创建文本节点
var cityNode = document.createTextNode(city[i][j]);
//5.将文本节点加入option节点中
opNode.appendChild(cityNode);
//alert(opNode.value);
//7.将option节点加入select节点中
selectNode.appendChild(opNode);
}
}
}
}
</script>
</head>
<body>
籍贯
<select onchange = "changeCity(this.value)">
<option >--请选择--</option>
<option value="0">湖南</option>
<option value="1">湖北</option>
<option value="2">上海</option>
<option value="3">广东</option>
</select>
<select id="cities">
</select>
</body>
</html>
JS案例六_2:省市级联动的更多相关文章
- JS案例六_1:添加城市
使用的相关知识点:对子节点的添加:document.appendClild() 文本节点的创建:document.createTextNode() 元素节点的创建:document.createEle ...
- WPF案例 (六) 动态切换UI布局
原文:WPF案例 (六) 动态切换UI布局 这个Wpf示例对同一个界面支持以ListView或者CardView的布局方式呈现界面,使用控件ItemsControl绑定数据源,使用DataTempla ...
- 第一个Vue.js案例
第一个Vue.js案例 使用Vue有如下几步 引入文件头 加入数据输出框 创建Vue对象,定义数据 案例: <!DOCTYPE html> <html lang="en&q ...
- js案例之使用正则表达式进行验证数据正确性
#js案例之使用正则表达式进行验证数据正确性 代码上传至 "GitHub" 样例: <tr> <td>密码:</td> <td> & ...
- JavaScript案例六:简单省市联动(NBA版)
JavaScript实现简单省市(NBA版)联动 <!DOCTYPE html> <html> <head> <title>JavaScript实现简单 ...
- JS案例 - 城市三级联动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 全国城市3级联动
js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ ...
- js 实现全国省市区三级联动
效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...
- JS案例经验二
一 关键词:鼠标事件的触发 可以在函数中指定让鼠标事件自动触发,而不是必须要鼠标滑过才触发,例如: main.onmouseover(); // 可以把该语句看做是鼠标滑过的模拟动作 main是DOM ...
随机推荐
- python自学day1
1.是区别Windows和linux在Python编码时不同: 在linux中,Python编码要在首行加入 #! /usr/bin/env python 指定编译的位置,而在Windows时中不 ...
- ace-editor线上代码编辑器
package.json { "name": "vue-cli", "version": "1.0.0", " ...
- DTS(待了解)
DTS(待了解) vs trasaction事务 脏数据 && 脏数据的清理 永远返回非空对象(忌:返回空值) 异常: invoker(trackTrace:debug.releas ...
- 【HNOI 2016】序列
Problem Description 给定长度为 \(n\) 的序列:\(a_1, a_2, \cdots , a_n\),记为 \(a[1 \colon n]\).类似地,\(a[l \colon ...
- Linux之DHCP搭建命令集锦
systemctl start dhcpd //启动DHCP systemctl enable dhcpd //配置服务开机启动 ps aux | grep ...
- [原][杂谈]如果人类的末日:"天网"出现
本文由南水之源在2019年3月21日发布,转载需声明原作者 本文仅为一次基于科技发展与科幻小说的幻想,如果天网真的出现,请不要参考这篇逻辑破败的推论. 参考: 天网(Skynet),是电影<终结 ...
- 在Python中使用SMTP发送电子邮件
Python中有内置的smtplib模块,完成一封邮件的发送,需要做很多准备工作.第三方的py_smtp这个包也是基于smtplib的,在Python中使用py_smtp发送电子邮件非常方便,只要填写 ...
- English Voice of <<Something just like this>>
歌名:something just like this演唱:Chris Martin 词:Andrew Taggart,Chris Martin 曲:Andrew Taggart,Chris Mart ...
- 从虚拟dom了解vue渲染函数
vue渲染函数就是render函数,他会返回一个VNode,VNode是一个js对象,是dom的映射 vue在介绍渲染函数那个章节看的不是很懂,所以想要彻底的理解渲染函数,首先需要了解vue的虚拟do ...
- macaca 初试
看到macaca的介绍,在移动端和PC端的自动化UI测试都同时支持, 联想到最近的行业都是同时对移动端和PC端(较少,几乎不维护)追求UI自动化测试,打算拿来试一下. 首先上macaca的地址:htt ...