需求;用一张图片表示。

分析：

<!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. 实践详细篇-Windows下使用VS2015编译的Caffe训练mnist数据集

    上一篇记录的是学习caffe前的环境准备以及如何创建好自己需要的caffe版本.这一篇记录的是如何使用编译好的caffe做训练mnist数据集,步骤编号延用上一篇 <实践详细篇-Windows下 ...

  2. （一）python基础知识

    Python:解释型语言(一边翻译一边运行)注释:单行注释(#).多行注释(ctrl+/):''' '''和""" """ (python2 ...

  3. 记录 Python3 安装 Scrapy 遇到的问题

    开发环境:Windows 10 + Python 3 使用 pip 去安装 Scrapy,  pip install scrapy , 报了一个错误. 原因:加 --user 的作用是显式指定安装在用 ...

  4. JQuery写的一个常见的banner

    大致的布局如下: <div class="banner" >                <div class="pic">      ...

  5. MySQL PHP 语法

    MySQL PHP 语法 MySQL 可应用于多种语言,包括 PERL, C, C++, JAVA 和 PHP. 在这些语言中,MySQL在PHP的web开发中是应用最广泛. 在本教程中我们大部分实例 ...

  6. lucene创建索引

    创建索引. 1.lucene下载. 下载地址:http://archive.apache.org/dist/lucene/java/. lucene不同版本之间有不小的差别,这里下载的是lucene ...

  7. Python 妙用heapq

    小顶堆求TopK大 大顶堆求BtmK小 题外话 Python有一个内置的模块,heapq标准的封装了最小堆的算法实现.下面看两个不错的应用. 小顶堆(求TopK大) 话说需求是这样的: 定长的序列,求 ...

  8. RE模块错误已解决.

    下面这个错误是由于在正则[...]的内部,减号'-'是一个有特殊含义的字符(代表字符范围) 所以如果需要在[...]内匹配减号'-',需要用反斜杠'\'转义. >>> import ...

  9. Python尾递归-创始人为何不愿TRE以及我们如何模拟TRE

    TRE=Tail Recursion Elimination 创始人是不愿意实现TRE的.他专门用了一篇文章来阐述原因. http://neopythonic.blogspot.com/2009/04 ...

  10. Linux下文件和文件夹操作命令详解

    花了两个小时的时间,把文件和文件夹相关的常用命令:创建.删除.移动.复制.查找.重命名在linux上测试了一把,总结下来.文件夹的这些基本操作是要多注意的,一不小心就达不到你想要的效果. 文件夹操作: ...