<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>每天一个JavaScript实例-动态省份选择城市</title>

<script>

var citystore = new Array();

citystore = [['SD','济南'],['SD','烟台'],['SD','青岛'],['SX','太原'],['BJ','北京'],['HN','海南']];

window.onload = function(){

	document.getElementById("state").onchange=changecity;

}

function changecity(){

	var state = this.value;

	var city = document.getElementById('cities');

	city.options.length = 0;

	for(var i = 0; i <citystore.length;i++){

		if(state == citystore[i][0]){

			var opt =new Option(citystore[i][1]);

			try{

				city.add(opt,null);

			}catch(e){

				city.add(opt);

			}

		}

	}

}

</script>

</head>

<body>

<form id="picker" method="post" action="">

	<select id = "state">

		<option value="">--</option>

		<option value="SD">山东</option>

		<option value="SX">山西</option>

		<option value="BJ">北京</option>

		<option value="HN">海南</option>

	</select>

	<select id="cities">

	</select>

</form>

</body>

</html>

每天一个JavaScript实例-动态省份选择城市的更多相关文章

  1. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 每天一个JavaScript实例-推断图片是否载入完毕

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. 每天一个JavaScript实例-递归实现反转数组字符串

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 每天一个JavaScript实例-canvas绘图

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 每天一个JavaScript实例-防止反复表单提交

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 每天一个JavaScript实例-apply和call的使用方法

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 每天一个JavaScript实例-获取元素当前高度

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. 基于visual Studio2013解决C语言竞赛题之0610冒泡排序函数

      题目

  2. CodeForces 228D. Zigzag（线段树暴力）

    D. Zigzag time limit per test 3 seconds memory limit per test 256 megabytes input standard input out ...

  3. 利用opencv中的级联分类器进行人脸检測-opencv学习（1）

    OpenCV支持的目标检測的方法是利用样本的Haar特征进行的分类器训练,得到的级联boosted分类器(Cascade Classification).注意,新版本号的C++接口除了Haar特征以外 ...

  4. .cmd文件与.bat文件

    .cmd文件与.bat文件的区别 包括ASSOC.FTYPE.APPEND.PATH.PROMPT.SET等6个命令在.bat和命令行环境下与.cmd环境下的执行表现不尽相同在.cmd环境下这些命令无 ...

  5. BZOJ 1342: [Baltic2007]Sound静音问题( 单调队列 )

    一开始写了个RMQ然后就T了... 好吧正解是单调队列, 维护两个单调队列... ----------------------------------------------------------- ...

  6. 免解压版的Mysql的启动脚本，并且执行导入（windows）

    @echo off rem ################### set MYSQL_VERSION=mysql-5.5.32-win32 set LOCK=wot.lock rem ####### ...

  7. C语言中的enum（枚举）使用方法

    近期在写数据结构的广义表时候用到了这个概念,在学习C语言的时候没有太注意们这里学一下. 我在网上结合了非常多资料,这里自己总结一下. 首先说.JAVA和C++中都有枚举类型. 假设一个变量你须要几种可 ...

  8. Eclipse用法和技巧十五：自动添加未实现方法1

    java代码中经常要实现一些接口,这个也是java代码独有的地方.实现接口,就意味着要实现这个接口中定义的方法,如果一个个去码出方法就需要记得方法名称等等,就算有内容辅助快捷键帮助,也是很麻烦的.这里 ...

  9. ImageMagick wrapper for php

    https://code.google.com/archive/p/phmagick/

  10. Windows下与Linux下编写socket程序的区别 《转载》

     原文网址:http://blog.chinaunix.net/uid-2270658-id-308160.html [[Windows]] [Windows: 头文件的区别] #include< ...