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 ...
随机推荐
- JAVA初级复习知识点归纳
JDK的安装: 下载.安装 配置环境变量 a) path:.;%JAVA_HOME%\bin; b) JAVA_HOME:JDK的安装目录 c) classpath JDK和JRE和JVM: JAVA ...
- Ubuntu 16.04利用SecureCRT上传/下载文件（sz/rz命令）
说明:XShell同样也是支持的. 一.安装软件 sudo apt-get install lrzsz 二.sz下载文件用法: #下载一个文件 sz filename #下载多个文件 sz filen ...
- SqlServer函数获取指定日期后的第某个工作日
获取工作日 需要编写一个SqlServer函数,F_getWorkday,传入两个参数,第一个为时间date,第二个参数为第几个工作日num.调用F_getWorkday后返回date之后的第num个 ...
- ThinkPHP3.2 点击看不清刷新验证码
欢迎使用Markdown编辑器写博客 baidu了一下.发现没有可用的源码,自己想了想,以下的方法可行. <!DOCTYPE html> <html> <head> ...
- 不同VLAN之间相互通信的两种方式
(单臂路由.三层交换) 试验环境:东郊二楼第三机房 试验设备:Catalyst 2950-24(SW3) Cisco 2611(R2) Catalyst 3750 SERIES (带两个SD接口,S8 ...
- 文本分类——NaiveBayes
前面文章已经介绍了朴素贝叶斯算法的原理,这里基于NavieBayes算法对newsgroup文本进行分类測试. 文中代码參考:http://blog.csdn.net/jiangliqing1234/ ...
- 华为OJ1964-求解立方根（牛顿迭代法）
一.题目描述 描述: 计算一个数字的立方根,不使用库函数. 函数原型double getCubeRoot(double input) 输入: 待求解参数 double类型 输出: 输出参数的立方根,保 ...
- png图片解码
PNG.可移植网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方的"PNG's Not GIF",是一种位图文件(bitmap ...
- 程序中使用cocostudio移植到android手机须要的若干配置过程
首先在解决方式下加入现有项: libCocosStudio.vcxproj E$uVS5Sbv! WL:0n"BExtensions.vcxproj libGUI.vcxproj 然后在pr ...
- Android oat文件提取转换
说明: 1.手机厂商可以修改Android源码并进行编译后再生成oat格式文件在手机上存储,比如boot-okhttp.oat,boot-framework.oat. 2.自带的apk可以调用这些模块 ...