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 ...
随机推荐
- cogs 48. [NOIP2007] 字符串的展开
48. [NOIP2007] 字符串的展开 ★☆ 输入文件:expand.in 输出文件:expand.out 简单对比时间限制:1 s 内存限制:128 MB [问题描述] 在初赛普 ...
- jmeter的Classpath即类或者jar包的搜索路径设置
对于master-slave模式,插件和依赖都需要放到slave上才能生效,并且需要重启slave使插件生效 查看配置文件:apache-jmeter-3.1/bin/jmeter.propertie ...
- windows安装docker
主要參考:http://docs.docker.com/installation/windows/ [1]安装完毕后同意后可能会报错: error in run: Failed to start ma ...
- centos 建立Clamav自动扫描脚本
vim autoscan.sh #建立自动扫描脚本 #!/bin/bash PATH=/usr/bin:/bin CLAMSCANTMP=`mktemp` clamdscan --recursive ...
- cocos2d-x中绘制3D图形--3D ToolKit for cocos2dx实现原理
首先:了解具体情况请看这里:https://github.com/wantnon2/3DToolKit-for-cocos2dx 在看代码之前,最好还是先把项目git下来执行一下demoproject ...
- Unity3D 游戏引擎之C#使用Socket与HTTP连接server数据传输包
近期比較忙.有段时间没写博客拉.近期项目中须要使用HTTP与Socket.雨松MOMO把自己这段时间学习的资料整理一下. 有关Socket与HTTP的基础知识MOMO就不赘述拉,不懂得朋友自己谷歌吧. ...
- 蓝桥杯 地宫寻宝 带缓存的DFS
历届试题 地宫取宝 时间限制:1.0s 内存限制:256.0MB 问题描写叙述 X 国王有一个地宫宝库. 是 n x m 个格子的矩阵. 每一个格子放一件宝贝. 每一个宝贝贴着价 ...
- iOS 代码安全加固--反编译和代码混淆
一.class-dump反编译 1.将打包的ipa反编译下,.ipa改成.zip,并解压 6.右击—显示包内容,找到如下有个白框黑底的 7.将其复制到桌面xx文件夹中,在终端中输入相关命令 cd 进 ...
- mac中apache+mysql+php+phpMyAdmin配置备忘
Mac OS X 内置Apache 和 PHP,使用起来非常方便.本文以Mac OS X 10.6.3和为例.主要内容包括: 启动Apache 运行PHP 安装MySQL 使用phpMyAdmin 配 ...
- Linux 内核开发 - 内存管理
1.1什么是内存管理 内存管理是对计算机内存进行分配和使用的技术.内存管理主要存在于多任务的操作系统中,因为内存资源极其有限.须要在不同的任务之间共享内存,内存管理的存在就是要高效.高速的非配内存,并 ...