JS练习:两级联动
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两级联动</title>
<script>
//准备数据
var provinces = [
["深圳市", "东莞市", "惠州市", "广州市"],
["长沙市", "岳阳市", "株洲市", "湘潭市"],
["厦门市", "福州市", "漳州市", "泉州市"]
];
/*
1. 确定事件: onchange
2. 函数: selectProvince()
3:
得到当前操作元素
得到当前选中的是那一个省份
从数组中取出对应的城市信息 动态创建城市元素节点
添加到城市select中
*/
function selectProvince() {
var province = document.getElementById("province");
//得到当前选中的是哪个省份
var value = province.value;
//从数组中取出对应的城市信息
var cities = provinces[value];
var citySelect = document.getElementById("city");
//清空select中的option
citySelect.options.length = 0; for (var i = 0; i < cities.length; i++) {
var cityText = cities[i];
//动态创建城市元素节点 <option>东莞市</option>
//创建option节点
var option1 = document.createElement("option"); //<option></option>
//创建城市文本节点
var textNode = document.createTextNode(cityText);//东莞市
//将option节点和文本内容关联起来
option1.appendChild(textNode); //<option>东莞市</option>
//添加到城市select中
citySelect.appendChild(option1);
}
}
</script>
</head>
<body>
<form action="">
<!--选择省份-->
<label for="province"></label>
<select onchange="selectProvince()" id="province">
<option value="-1">--请选择--</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<!--选择城市-->
<label for="city"></label>
<select id="city"></select>
</form>
</body>
</html>
JS练习:两级联动的更多相关文章
- JS 省市两级联动(不带地区版本)
基于网上找的一个版本改造,因为项目需求不需要地区只要省.市,所以做了改版,两个input上直接取出了数据 <html> <head> <script src=" ...
- ajax实现无刷新两级联动DropDownList
ajax实现的无刷新三级联动 http://zhangyu028.cnblogs.com/articles/310568.html 本文来自小山blog:http://singlepine.cnblo ...
- Combobox下拉框两级联动
下拉框的两级联动是我们开发中经常遇到一种情况.比如一个学生管理系统中,根据年级.科目及姓名查询学生考试成绩,年级和科目都是硬盘中的有限数据(数据库)而学生则可以有用户手动指定,这时在数据库中有年级和科 ...
- 【分享】纯js的n级联动列表框 —— 基于jQuery,支持下拉列表框和列表框,最重要的是n级,当然还有更重要的
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...
- Jquery实现两级联动
最后结果如下: 关键代码如下: <select name="customerCondition['credibilityBegin']" id="credibili ...
- 纯js的N级联动列表框 —— 基于jQuery
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...
- ASP_NET实现界面无刷新的DropdownList两级联动效果
所谓DropdownList联动,也就是在选一个DropdownList的时候使另外一个DropdownList的内容更新(如选省份时显示所属城市),按常规的方法那就是在第一个DropdownList ...
- Thinkphp 两级联动
<!-- 前端代码部分--><div class="pop-movegroup" id="salesmanBox"> <dl> ...
- ajax_get/post_两级联动
使用ajax实现菜单联动 通常情况下,GET请求用于从服务器上获取数据,POST请求用于向服务器发送数据. 需求:选择第一个下拉框的值,根据第一个下拉框的值显示第二个下拉框的值 首先使用GET方式. ...
随机推荐
- 一个MySQL-JDBC驱动bug引起的血案……
问题背景 公司是做电商系统的,整个系统搭建在华为云上.系统设计的时候,考虑到后续的用户和订单数量比较大,需要使用一些大数据库的组件.关系型数据库这块,考虑到后续数据量的快速增长,不是直接写入MySQL ...
- POJ 2367 Genealogical tree 拓扑题解
一条标准的拓扑题解. 我这里的做法就是: 保存单亲节点作为邻接表的邻接点,这样就非常方便能够查找到那些点是没有单亲的节点,那么就能够输出该节点了. 详细实现的方法有非常多种的,比方记录每一个节点的入度 ...
- python 文档生成 字符串替换
替换 fnr, fnr_source, fnw = 'my.py.html', '产品清单.txt', 'my.py.res.html'd_source = {}with open(fnr_sourc ...
- IE浏览器 多版本之间切换
由于Win7系统最低支持IE8的版本,不能通过安装IE7版本来达到要求. 有一个替代方案,通过IE自带Emulation来实现,实现步骤如下: 打开现有的IE浏览器 按下F12键 切换到“Emulat ...
- Linux 用户管理(1) (/etc/passwd)
Linux所有的用户都在/etc/passwd文件里面. 1.为什么需要用户 1)计算机及网络资源的合理分配 2)可以控制用户访问系统的权限.3)身份认证 4) 进程 以某个用户的身份来运行 2.用 ...
- codevs1154能量项链(环形dp,区间dp)
1154 能量项链 2006年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 在Mars星球上 ...
- Gson 转日期中的错误
今天在用Gson做json转化是遇到一个问题,本地执行没有问题(windows 7),包丢到服务器上(Centos)就报错了. 后经分析发现DateTypeDapter类中取本地环境的日期格式参考ht ...
- ZOJ1969-Hard to Believe, but True!
import re while True: x = raw_input() if(x == '0+0=0'): print 'True' break a,b,c = re.split('[+=]', ...
- linux 防火墙关闭
systemctl status firewalld.servicesystemctl status iptables.service关闭防火墙,selinux15:54:43运维-李浩 2017/ ...
- BZOJ 4304 tarjan+topsort+bitset
我就是想骗一骗访问量 先Tarjan搞出来所有的强连通分量 正向连边 反向连边 topsort一发 搞出来每个点可以到哪些点 和哪些点可以到这个点 对于每条边 与一下 就是答案 //By Siri ...