需求;用一张图片表示。

分析：

<!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. JavaScript正则表达式模式匹配(1)——基本字符匹配

    var pattern=/g..gle/; //点符号表示匹配除了换行符外的任意字符 var str='g78gle'; alert(pattern.test(str)); var pattern=/ ...

  2. seaborn使用（绘图函数）

    seaborn使用(绘图函数) 数据集分布的可视化 分类数据的绘图 线性关系可视化 一.数据集分布的可视化 distplot kdeplot rugplot 1.distplot() 灵活的绘制单变量 ...

  3. RobotFramework自动化测试框架-使用Python编写自定义的RobotFramework Lib

    使用Python构建Lib工程 可以用来开发Python Lib的IDE工具有很多,常见的有Pycharm,Eclipse with PyDev插件等,而且在RobotFramework官网中也已经提 ...

  4. 阿里云服务器云数据库免费体验（Java Web详细实例）

    一.效果展示 博主部署了两个war包到阿里云服务器上,一个是没有连接数据库的,另外一个是连接了数据库的. (由于阿里云服务器免费使用15天,下面链接约2016年3月9日后无效) (1)无数据库版访问地 ...

  5. Android基于JsBridge封装的高效带加载进度的WebView

    Tamic http://blog.csdn.net/sk719887916/article/details/52402470 概述 从去年4月项目就一直用起了JsBridge,前面也针对jsBrid ...

  6. TOP-N类查询

    Top-N查询 --Practices_29:Write a query to display the top three earners in the EMPLOYEES table. Displa ...

  7. 仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图（二）之SuperIndicator源码分析

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼:http://blog.csdn.net/hejjunlin/article/details/52510431 背景:仿爱奇艺视频,腾讯视频 ...

  8. UNIX网络编程——揭开网络编程常见API的面纱【上】

    Linux网络编程API函数初步剖析 今天我们来分析一下前几篇博文中提到的网络编程中几个核心的API,探究一下当我们调用每个API时,内核中具体做了哪些准备和初始化工作. 1.socket(famil ...

  9. Python模块探秘之EasyGui

    在Windows想用Python开发一些简单的界面,所以找到了很容易上手的EasyGui库.下面就分享一下简单的使用吧. 参考的链接:官网Tutorial 接下来,我将从简单,到复杂一点点的演示如何使 ...

  10. DBoW2应用

    图像对应的bag-of-words向量\(v_t\) 假设词典总共有\(W\)个单词,那么每一幅图像能够用一个\(W\)维的向量表示 \((t_1, t_2, t_3, ..., t_W)\)其中 \ ...