需求;用一张图片表示。

分析：

<!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. 216. Combination Sum III(medium, backtrack, 本类问题做的最快的一次)

    Find all possible combinations of k numbers that add up to a number n, given that only numbers from ...

  2. HTML入门知识

    B/S:浏览器-服务器 C/S:客户端-服务器 更新麻烦 管理麻烦 PHP:基于BS结构进行项目开发的语言 ====================HTML:超文本标记语言 -- 控制网面内容CSS: ...

  3. 全局变量&局部变量,global&nonlocal

    ###全局变量与局部变量 1.函数内部的变量名如果第一次出现,且出现在=前面,即被视为定义一个局部变量,不管全局域中有没有用到该变量名,函数中使用的将是局部变量 2.函数内部的变量名如果第一次出现,且 ...

  4. MySQL 字符串截取SUBSTRING()函数

    MySQL 字符串截取相关函数: 1.从左开始截取字符串 left(str, length) 说明:left(被截取字段,截取长度) 例: select left(content,200) as ab ...

  5. cassandra 3.x官方文档(6)---内部原理之存储引擎

    写在前面 cassandra3.x官方文档的非官方翻译.翻译内容水平全依赖本人英文水平和对cassandra的理解.所以强烈建议阅读英文版cassandra 3.x 官方文档.此文档一半是翻译,一半是 ...

  6. 快速排序quick_sort（python的两种实现方式）

    排序算法有很多,目前最好的是quick_sort:unstable,spatial complexity is nlogN. 快速排序原理 python实现 严蔚敏的 datastruct书中有伪代码 ...

  7. springMVC源码分析--ControllerBeanNameHandlerMapping（八）

    在上一篇博客springMVC源码分析--AbstractControllerUrlHandlerMapping(六)中我们介绍到AbstractControllerUrlHandlerMapping ...

  8. JVM垃圾回收总结

    来自Oracle官方文档,对JVM GC知识整理的清晰易懂,查资料还是看官方的好! 1 GC步骤简述 步骤1:标记 (Marking) 根据对象引用关系,将未被任何对象引用的对象实例标记出来,如下图中 ...

  9. C语言中switch case语句可变参实现方法(case 参数 空格...空格 参数 :)

    正常情况下,switch case语句是这么写的: : : ... ;break ; default : ... ;break ; } 接下来说一种不常见的,但是对于多参数有很大的帮助的写法: 先给一 ...

  10. java的properties文件-jdbc优化编程（五）

    通过配置文件能够减小我们的工作量,带来方便. 建立properties文件 1.首先是新建一个dbconfig.properties.然后添加如下代码: driver=com.mysql.jdbc.D ...