需求;用一张图片表示。

分析：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript"> 

	function showCity(){

		//维护一个二维数组存储省份对应的城市

		var citys = [[],["广州","佛山","湛江","中山"],["长沙","衡阳","岳阳","郴州"],["南宁","桂林","贵港","柳州"]];			

		//获取省份对应的节点

		var provinceNode = document.getElementById("province");

		//获取省份选中的选项

		var selectIndex =  provinceNode.selectedIndex;

		//获取对应的城市

		var  cityDatas = citys[selectIndex];

		//找到city节点

		var cityNode = document.getElementById("city");

		//设置options的个数。<span style="font-family: Arial, Helvetica, sans-serif;">先清空city框所有option。因为不清空的话相当于不断的添加城市了。这里</span><span style="font-family: Arial, Helvetica, sans-serif;">保留一个option，即城市这一项保留下来其他的相当于清空了。</span><span style="font-family: Arial, Helvetica, sans-serif;">

</span>

		cityNode.options.length = 1 ;

		//遍历对应的所有城市然后创建对应的option添加到city上。

		for(var index = 0; index<cityDatas.length ; index++){

			var option = document.createElement("option");//创建option项

			option.innerHTML = cityDatas[index];//为创建的option添加属性值

			cityNode.appendChild(option);//拼接到cityNode后边，即在城市的属性后边添加城市。

		}

	}

</script>

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

<title>无标题文档</title>

</head>

<body>

	省份<select id="province" onchange="showCity()">

    		<option>省份</option>

    		<option>广东</option>

            <option>湖南</option>

            <option>广西</option>

    	</select>

	城市<select id="city"><option>城市</option></select>

</body>

</html>

javascript之DOM编程实现城市的联动框的更多相关文章

  1. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

  2. 高性能JavaScript之DOM编程

    我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...

  3. 高性能Javascript(2) DOM编程

    第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...

  4. JavaScript的DOM编程--12--innerHTML属性

    innerHTML属性: 1). 浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容 <html> < ...

  5. JavaScript的DOM编程--11--插入节点

    插入节点: 1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面 var reference = element.insertBefore(newNode,t ...

  6. JavaScript的DOM编程--10--删除节点

    1). removeChild(): 从一个给定元素里删除一个子节点 var reference = element.removeChild(node); 返回值是一个指向已被删除的子节点的引用指针. ...

  7. JavaScript的DOM编程--09--节点的替换

    节点的替换: 1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点 var reference = element.replaceChild(newChild,o ...

  8. JavaScript的DOM编程--08--复习

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  9. JavaScript的DOM编程--07--节点的属性

    节点的属性: 1). nodeName: 代表当前节点的名字. 只读属性. 如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串 2). nodeType:返回一个整 ...

随机推荐

  1. angular学习笔记 父子组件传值

    一.如何将父组件的值传到子组件? 在子组件里面引入Input,然后用@Input 变量1 接收 接着在父组件中的,子组件标签上添加[msg]="msg",中括号里的名字要与子组件中 ...

  2. Sublime Text3时间戳查看转换插件的开发

    平常配置表中,经常需要用到时间配置,比如活动开始结束.从可读性上,我们喜欢2017-04-27 17:00:00,从程序角度,我们喜欢用1493283600.前者是包含时区概念的,而后者市区无关,所以 ...

  3. 用tensorlayer导入Slim模型迁移学习

    上一篇博客[用tensorflow迁移学习猫狗分类]笔者讲到用tensorlayer的[VGG16模型]迁移学习图像分类,那麽问题来了,tensorlayer没提供的模型怎么办呢?别担心,tensor ...

  4. 在查询语句中使用 NOLOCK 和 READPAST

    对于非银行等严格要求事务的行业,搜索记录中出现或者不出现某条记录,都是在可容忍范围内,所以碰到死锁,应该首先考虑,我们业务逻辑是否能容忍出现或者不出现某些记录,而不是寻求对双方都加锁条件下如何解锁的问 ...

  5. Android开发技巧——设置系统状态栏颜色

    开门见山,先来三张效果图: 然后我们再来讲如何实现以及如何快速地实现. 如何实现 实现设置系统状态栏颜色需要至少在Android 4.4.2(API 19)以上.这是因为,在这个版本以下,没有任何的A ...

  6. 深入Java虚拟机（4）——网络移动性

    一.软件应用程序发展的几个阶段 软件应用程序发展经历了如下几个阶段: 服务于多个终端用户的大型计算机系统 孤立的个人计算机上运行孤立的软件 客户机/服务器模式 分布式处理模式 内容服务模式(网络移动性 ...

  7. linux下数据同步、回写机制分析

    一.前言在linux2.6.32之前,linux下数据同步是基于pdflush线程机制来实现的,在linux2.6.32以上的版本,内核彻底删掉了pdflush机制,改为了基于per-bdi线程来实现 ...

  8. 20160215.CCPP体系详解(0025天)

    程序片段(01):01.Malloc.c 内容概要:Malloc拓展 #include <stdio.h> #include <stdlib.h> //01.内存伸缩函数: / ...

  9. Spark技术内幕： 如何解决Shuffle Write一定要落盘的问题？

    在Spark 0.6和0.7时,Shuffle的结果都需要先存储到内存中(有可能要写入磁盘),因此对于大数据量的情况下,发生GC和OOM的概率非常大.因此在Spark 0.8的时候,Shuffle的每 ...

  10. static,this,private关键字用法

    1:成员变量和局部变量的区别(理解) (1)在类中的位置不同 成员变量:类中方法外 局部变量:方法定义中或者方法声明上 (2)在内存中的位置不同 成员变量:在堆中 局部变量:在栈中 (3)生命周期不同 ...