<!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语言竞赛题之0806平均分

     题目

  2. TCP拥塞控制算法内核实现剖析（十）

    内核版本:3.2.12 主要源文件:linux-3.2.12/ net/ ipv4/ tcp_veno.c 主要内容:Veno的原理和实现 Author:zhangskd @ csdn blog 概要 ...

  3. Codeforces Round #189 (Div. 2)

    题目地址:http://codeforces.com/contest/320 第一题:基本题,判断mod 1000,mod 100.,mod 10是不是等于144.14.1,直到为0 代码如下: #i ...

  4. C/C++迭代器使用具体解释

    迭代器是一种检查容器内元素并遍历元素的数据类型.能够替代下标訪问vector对象的元素. 每种容器类型都定义了自己的迭代器类型,如 vector: vector<int>::iterato ...

  5. ListView 使用方法（Asp.Net）

    您将须要用到的独有数据绑定控件. Fritz Onion 代码下载位置: ExtremeASPNET2008_03.exe (192 KB) Browse the Code Online  文件夹 L ...

  6. PB数据管道

    数据管道提供了一种不同数据库之间传递数据和(或)表结构的方法. 数据管道对象 要完毕数据管道的功能须要提供例如以下内容: 须要数据源和目标数据库,并可以和这两个数据库正常联接 须要源数据库中的哪些表: ...

  7. Java基础02 方法与数据成员

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在Java基础01 从HelloWorld到面向对象,我们初步了解了对象(obje ...

  8. javascript笔记整理（字符串对象）

    一.属性 1.length——字符串的长度(不区分中英文) var a="chen陈"; alert(a.length); //结果:5 2.constructor——对象的构造函 ...

  9. 获取wpf datagrid当前被编辑单元格的内容

    原文 获取wpf datagrid当前被编辑单元格的内容 确认修改单元个的值, 使用到datagrid的两个事件 开始编辑事件 BeginningEdit="dataGrid_Beginni ...

  10. CentOS下利用sshpass不用手动输入密码远程执行命令

       在测试的时候要同时操作多台机器,每次都要挨个去执行几乎相同的命令或者修改一些设置,这样很影响工作效率也很烦,所以就想写一个脚本,远程自动去做这些操作.远程执行命令很简单,但是不能在执行命令加上命 ...