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 ...
随机推荐
- JVM(三)：深入分析Java字节码-上
JVM(三):深入分析Java字节码-上 字节码文章分为上下两篇,上篇也就是本文主要讲述class文件存在的意义,以及其带来的益处.并分析其内在构成之一 ---字节码,而下篇则从指令集方面着手,讲解指 ...
- mvnw是什么（Maven Wrapper/Maven保持构建工具版本一直的工具）
背景 Maven是一款非常流行的Java项目构建软件,它集项目的依赖管理.测试用例运行.打包.构件管理于一身,是我们工作的好帮手,maven飞速发展,它的发行版本也越来越多,如果我们的项目是基于Mav ...
- struts2学习笔记（二）—— 获取登录信息及计算在线人数
实现目的: 1.点击"Login"的超链接.进入登录页面 2.填写登录信息.提交表单,将用户信息保存进Session 3.显示用户名,并计算在线 ...
- 怎样用ccache加速cocos2d-x android版本号的编译
下面步骤在MAC下測试通过: 首先是安装CCache, 能够用homebrew brew install --HEAD ccache 也能够用源代码安装 git clone https://githu ...
- nodejs参考文章
http://www.cnblogs.com/lily1010/p/6683987.html https://manlili.github.io/2015/04/06/Node%E5%85%A5%E9 ...
- Session与Cookie解析
Session和Cookie这两个对象也接触了比較长的时间了,今天就来总结一下. 首先,他们都是会话跟踪中经常使用的技术.Cookie在client记录信息来确定用户身份,Session在服务端记录信 ...
- 【版本号公布】Jeecg-P3 1.0 公布，J2EE微服务框架（插件开发）
JEECG-P3 1.0 公布了! JEECG-P3 1.0是一个J2EE微服务框架(插件开发). 特点:业务组件以JAR方式提供,插件模式.松耦合.可插拔.支持独立部署,也能够无缝集成Jeecg平台 ...
- libsqlite3.dylib与libsqlite3.0.dylib的差别
在我们加入数据库框架时,在搜索框中输入sqlitekeyword,以下列表区会显示libsqlite3.dylib,libsqlite3.0.dylib. 此时我们选择libsqlite3.0.dyl ...
- Codeforces(429D - Tricky Function)近期点对问题
D. Tricky Function time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- [翻译角]Headline English: A Captain Should Be Pitch Perfect at a Multitude of Skills (ESLPOD Blog)
以下转自www.eslpod.com,翻译为本人添加.其余版权均归原网站所有. ESLPOD是一个英语学习网站,我最初知道这个网站,是因为“奶爸”<把你的英语用起来>(电子版3元)一书的推 ...