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 ...
随机推荐
- Linux下启用IP转发功能（主要针对Ubuntu的使用）
说明:以下的操作只要在Linux下都是通用的. Linux发行版默认情况下是不开启IP转发功能的.如果架设一个Linux路由或者VPN服务就需要开启该服务. 1.通过访问sysctl的内核ipv4.i ...
- spring依赖注入中获取JavaBean
一.这个接口有什么用? 当一个类实现了这个接口(ApplicationContextAware)之后,这个类就可以方便获得ApplicationContext中的所有bean.换句话说,就是这个类可以 ...
- hdu 4291 矩阵幂 循环节
http://acm.hdu.edu.cn/showproblem.php?pid=4291 凡是取模的都有循环节-----常数有,矩阵也有,并且矩阵的更奇妙: g(g(g(n))) mod 109 ...
- 解决fragmentTransaction.replace不能全屏
今天遇到个问题,使用fragmentTransaction.replace替换后的内容不能全屏.. FragmentManager fragmentManager = getSupportFragme ...
- HDU 5402 Travelling Salesman Problem (构造)（好题）
大致题意:n*m的非负数矩阵,从(1,1) 仅仅能向四面走,一直走到(n,m)为终点.路径的权就是数的和.输出一条权值最大的路径方案 思路:因为这是非负数,要是有负数就是神题了,要是n,m中有一个是奇 ...
- JAVA编程思想(2) - 操作符(二)
5. 直接常量 -一般来说,假设程序里使用了"直接常量",编译器能够准确的知道要生成什么样的类型.但有时候却是模棱两可的. 这时候须要我们对编译器进行适当的"指导&quo ...
- php高效获取数据分页
mysql.php 获取数据库中的记录,全然个人经验总结,仅供參考! <? php /** *PHP+MYSQL数据库基本功能 *http://blog.csdn.net/yown */ ### ...
- Canvas: trying to use a recycled bitmap android.graphics.Bitmap@XXX
近期在做和图片相关显示的出现了一个问题,整理一下思路.分享出来给大家參考一下: Exception Type:java.lang.RuntimeException java.lang.RuntimeE ...
- dm385和8127的区别
DM385/DM8127在ITS智能交通中的应用分析德州仪器(TI)自推出DM385和DM8127视频处理器在业界反响很大特别是深圳安博会上展出的1080P60帧高清效果之后很多龙头企业也跃 ...
- nginxserver报403 forbidden错误的解决的方法
改动nginx.config文件内容: location / { #root html; root D:\java; ...