<!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方法来修改onclick值

    这篇文章主要介绍了通过jQuery的attr修改onclick值的解决方法 ,需要的朋友可以参考下 var js = "alert('B:' + this.id); return false ...

  2. Java网络编程：利用Java mail包发送电子邮件

    下面代码是利用Java mail包封装了一个发送邮件的类 import java.io.File; import java.util.ArrayList; import java.util.Date; ...

  3. Gora_百度百科

    Gora_百度百科     Gora    编辑    目录         1什么是Apache Gora         2为什么要使用Apache Gora         3Gora的一个源代 ...

  4. uva 10313 Pay the Price（完全背包）

    题目连接:10313 - Pay the Price 题目大意:有0~300这300种价值的金额. 现在可能给出参数: 1个:n, 输出可以组成价值n的方式的个数. 2个:n, a输出用个数小于a的价 ...

  5. JAVA序列化在IO中读写对象的使用

    序列化就是一种用来处理对象流的机制,所谓对象流也就是将对象的内容进行流化.可以对流化后的对象进行读写操作,也可将流化后的对象传输于网络之间.序列化是为了解决在对对象流进行读写操作时所引发的问题. 序列 ...

  6. Android Camera系列开发 (二)通过Intent录制视频

    Android Camera系列开发 (二)通过Intent录制视频 作者:雨水  2013-8-18 CSDN博客:http://blog.csdn.net/gobitan/ 概述 使用Camera ...

  7. C# - Byte类型与String类型互转

    byte[] bs = Encoding.UTF8.GetBytes("你的字符串"); string str = Encoding.UTF8.GetString(bs);

  8. perl 使用SUPER类来访问覆盖的方法

    有时候,你希望一个衍生类的方法表现得象基类中的某些方法的封装器 这就是 SUPER 伪类提供便利的地方.它令你能够调用一个覆盖了的基类方法,而不用声明 是哪个类定义了该方 法.(注:不要把这个和第十一 ...

  9. jsp 分页（数据库读取数据）

    <%@ page contentType="text/html; charset=gb2312"%> <%@ page language="java&q ...

  10. 通过Jexus 部署 dotnetcore

    通过Jexus 部署 dotnetcore版本MusicStore 示例程序 ASPNET Music Store application 是一个展示最新的.NET 平台(包括.NET Core/Mo ...