<!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. Jquery学习笔记： attr和 prop的区别，以及为html标签自定义属性

    一.自定义html标签属性 对于html文件中的html标签,可以自定义属性,如: <a href="#" id="link1" action=" ...

  2. 仿StackOverflow开发在线问答系统

    仿StackOverflow开发在线问答系统 [第二期11月9日开课]使用Python Flask Web开发框架实现一套类似StackOverflow的在线问答平台LouQA,具备提问,回答,评论点 ...

  3. 《高质量程序设计指南：C++/C语言》面试题整理

    本试题仅用于考查C++/C程序员的基本编程技能.内容限于C++/C常用 语法,不涉及 数据结构. 算法以及深奥的语法.考试成绩能反映出考生的编程质量以及对C++/C的理解程度,但不能反映考生的智力和软 ...

  4. 软件project师的属性与发展

    工作近十年了.[软件project师] 一直是我职业 title 的中心词,仅仅是前面的修饰语在不断变化,从0基础.中级.高级到资深. 事实上 [软件project师] 是一个非常泛化的定义.工作现实 ...

  5. Tomcat 7最大并发连接数的正确修改方法(转)

    几乎所有的中文网页都介绍,要修改Tomcat的默认最大并发连接数,应该进行如下设置(实际上这些步骤是错误的): -------------------------------------------- ...

  6. sudo service memcached start

    我安装后memcached后,并使用 ? 1 sudo service memcached start

  7. Bandwidth内存带宽測试工具

    本博文为原创,遵循CC3.0协议,转载请注明出处:http://blog.csdn.net/lux_veritas/article/details/24766015 ----------------- ...

  8. 代码格式化工具Astyle配置

    Astyle是一个很好的代码格式化工具,其他不多说,下面介绍一下我在VS 2010的配置 1. http://sourceforge.net/projects/astyle,这是该插件的网站,下载后把 ...

  9. perl 继承小例子

    <pre name="code" class="html"><pre name="code" class="ht ...

  10. Oracle Data Guard 创建物理Standby数据库

    创建物理备库 机器名                    a1                    a2                    IP:                    192 ...