HTML城市联动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function showCity(){
//维护一个二维数组存储省份对应的城市
var citys = [[],["广州","佛山","湛江","中山"],["长沙","衡阳","岳阳","郴州"],["南宁","桂林","贵港","柳州"]];
//获取省份对应的节点
var provinceNode = document.getElementById("province");
//获取省份选中的选项
var selectIndex = provinceNode.selectedIndex;
//获取对应的城市
var cityDatas = citys[selectIndex];
//找到city节点
var cityNode = document.getElementById("city");
/*
//先清空city框所有option
var children = cityNode.childNodes;
for(var i = 0; i<children.length ; ){
cityNode.removeChild(children[i]);
}
*/
//设置options的个数。
cityNode.options.length = 1 ;
//遍历对应的所有城市然后创建对应的option添加到city上。
for(var index = 0; index<cityDatas.length ; index++){
var option = document.createElement("option");
option.innerHTML = cityDatas[index];
cityNode.appendChild(option);
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
省份<select id="province" onchange="showCity()">
<option>省份</option>
<option>广东</option>
<option>湖南</option>
<option>广西</option>
</select>
城市<select id="city"><option>城市</option></select>
</body>
</html>
HTML城市联动的更多相关文章
- 全国三级城市联动 js版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQUERY省、市、县城市联动选择
JQUERY 插件开发——CITYLINKAGE(省.市.县城市联动选择) 第一部分:背景 开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前 ...
- JS中简单的二级城市联动
代码奉上: <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
- 城市联动 - 自动生成SQL语句
字段比较简单/ 如果有需要可以自己定制字段和排序/ 一共二级城市联动, 本人业务需要, 所以就两层, 网上关于三层的挺多, 有需要可以借鉴/ 废话不多说, 先看效果图, 代码在下面 <?php ...
- java基础68 JavaScript城市联动框（网页知识）
1.城市联动框 <!doctype html> <html> <head> <meta charset="utf-8"> <t ...
- Jquery 插件开发——citylinkage（省、市、县城市联动选择）
第一部分:背景 开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前呢,一直想写这个插件,然后错过了一个写这个插件的机会(这个得回顾到很久以前了. ...
- jQuery+ajax城市联动
分享一下自己最近写的城市联动.技术使用ajax+jQuery实现. 首先请看前台的javascript代码. 以下是连个实现异步加载的方法. <script type="text/ja ...
- thinkPHP三级城市联动
html+js: <!doctype html> <html lang="en"> <head> <meta charset=" ...
- 通过城市联动实时将地址显示到text中
<div class="form-group field-supplier-sort <?php if($model->getErrors('province_id') | ...
- vue select二级城市联动及第二级默认选中第一个option值
当二级联动比如选择国家的时候,希望选中一个国家的时候后面城市默认选中第一个城市,则给国家的select加一个@change事件就可以了 <div class="inputLine&qu ...
随机推荐
- ZOJ3953 ZJU2017校赛（贪心）
题意:给出n个区间,求至少删掉多少个区间使得不存在区间a, b, c 两两相交 (定义两个区间相交是,区间[l1, r1]和区间[l2, r2]相交,当且仅当存在一个数x,l1<=x< ...
- MongoDB小结14 - find【查询条件$lt $lte $gt $gte】
$lt $lte $gt $gte 以上四个分别表示为:< . <= . > . >= . 通常的做法是将他们组合起来,以便查找一个范围. 比如,查询年龄在18到25岁(含)的 ...
- golang 中可变参数的个数
package main import "fmt" func Greeting(prefix string, who ... string) { fmt.Println(prefi ...
- Centos samba install
Ready Change Root Password passwd root 在提示下建立新密码 静态IP vi /etc/sysconfig/network-scripts/ifcfg-eth0 ...
- 2016/1/14 java生成指定范围的随机数
java生成指定范围的随机数 package edu.sjtu.erplab.io; import java.util.Random; public class RandomTest { public ...
- 关于spring配置文件中编辑时没有提示信息的问题
spring配置文件头部信息主要是提供一个xml的编写规范作用. 新创建的配置文件引入头部信息后,编辑时没有提示信息,重启elipse即可解决.
- luogu1966 火柴排队
题目大意 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度.现在将每盒中的火柴各自排成一列,同一列火柴的高度互不相同,两列火柴之间的距离定义为: $\sum_{i=1}^n(a_i-b_i) ...
- [Codeforces 1037E] Trip
[题目链接] http://codeforces.com/problemset/problem/1037/E [算法] 首先离线 , 将问题倒过来考虑 , 转化为 : 每次删除一条边 , 此时最多有多 ...
- [Codeforces 140C] New Year Snowmen
[题目链接] https://codeforces.com/problemset/problem/140/C [算法] 显然 , 我们每次应优先考虑数量多的雪球 将雪球个数加入堆中 , 每次取出数量前 ...
- [JSOI 2008] 星球大战
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1015 [算法] 考虑离线 , 将删点转化为加点 , 用并查集维护连通性即可 时间复杂 ...