<!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. cocos2d-x游戏开发系列教程-中国象棋03-主界面

    前情回顾 上个博客说道我们象棋程序进入了欢迎界面,在欢迎界面下等待一秒进入主界面 进入主界面的关键代码如下: CCScene* pScene = CCMainMenu::scene();  创建sce ...

  2. poj 1990

    题目链接 借鉴cxlove大神的思路 题意:听力v,位置x,2个牛交流声音为max(v1,v2)*(x1-x2),求总的 10000^2 tle 用的树状数组做的,排序,2个,小于vi的牛的总数和距离 ...

  3. Java设计模式菜鸟系列(七)命令模式建模与实现

    转载请注明出处:http://blog.csdn.net/lhy_ycu/article/details/39804057 命令模式(Command):将"请求"(命令/口令)封装 ...

  4. 异常configure: *** apu library not found.

    安装modsecurity时,出现"configure: *** apu library not found.".      解决方法: yum install apr-util- ...

  5. 开发板和centos服务器tftp传文件

    CentOS下使用TFTP向目标板传送文件http://www.linuxidc.com/Linux/2010-10/29218.htm 1.安装相关软件包 为了使主机支持TFTP,必须确保TFTP后 ...

  6. MFC 只启动一个程序实例

    问题描述: 我们开发过程中可能会经常遇到,只启动一个程序实例.即一个程序启动之后,如果再次执行该程序,将会恢复之前打开的程序,而不是打开一个新的程序. 实现原理:利用FindWindow/FindWi ...

  7. javascript笔记整理（对象的继承顺序、分类）

    Object.prototype.say=function(){ alert("我是顶层的方法"); } children.prototype=new parent(); pare ...

  8. React.js学习

    React.js学习之环境搭建 1 工欲善其事必先利其器:前端开发工具 1.1 WebStorm和Sublime Text Sublime Text:作为代码编辑器,Sublime Text的优点如下 ...

  9. Linux下安装配置词典GoldenDict

    GoldenDict   apt-get install goldendict 安装完成以后,需要自己手动加入字典,增加在线翻译网址(例如,有道,金山等),点击 编辑--dictionaries  完 ...

  10. Android 计时与倒计时

    方法一 Timer与TimerTask(Java实现) [java]  view plain copy print ?   public class timerTask extends Activit ...