js操纵跨frame的三级联动select下拉选项实例介绍


Posted in Javascript onMay 19, 2013

运用HTML、CSS以及Javascript相关知识,编写多窗口多菜单的内容联动。

考察学生关于frame、浏览器对象,以及表单控件的概念,javascript事件触发机制和程序设计,
以及用CSS来组织文字展示的掌握程度,使学生对DHTML有更加深刻的理解。
实验内容【必做】
(1)建立一个包含三个frame的窗口
(2)第一个frame1中包含一个select,内容是中国的各个省
(3)第二个frame2中同样含有一个select,内容是各省的地级市
(4)第三个frame3用来显示关于某地市的介绍。
(5)当在frame1的selecet中选择某个省,则frame2中的select自动把可选项变为该省下的各地市
(6)当在frame2中的select选中某地市后,在frame3中显示该地市的介绍
(7)介绍要求用div容纳,居左对齐,蓝色字,20px,首行缩进。

菜单联动参考界面效果

提示:实现本试验可以有多种方式(例如:css版,dom版,ajax版,prototype版都可以实现),学员只需选择一种实现方式即可。

菜单联动试验相关数据
江苏
南京 南京是江苏省的省会,六朝古都,历史遗迹丰富,文化底蕴深厚。
泰州 泰州是千年古郡,胡主席出生的地方,汪老师的故乡,以三麻出名,其中尤以麻将闻名。
苏州 “上有天堂,下有苏杭”,苏州以园林而出名,著名的园林有“拙政园”、“狮子林”等,人杰地灵,文人墨客辈出。

浙江
杭州 杭州是浙江省的省会,风景优美,人间仙境,所谓“上有天堂,下有苏杭”。
温州 温州最出名的就是商人,温州人几乎人人都经商,举国痛恨的温州炒房团就是其中的代表!
嘉兴 对嘉兴的了解,还是停留在嘉兴南湖上举行的那次历史性的大会。

广东
广州 广州是广东省的省会,经济发达,但是犯罪猖獗!
深圳 深圳是全国第一个经济特区,经济发达,几乎全是外来人口,跟广州一样,治安也不好。
珠海 珠海是我国第一批沿海开放城市之一,城市优美,典型的海滨城市,适合居住。

写了一个shit 味 不是太浓的js代码,供各位看官和懒蛋们享用。
上代码:
1.frame_a.htm: 显示省份province的下拉列表

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=GBK"> 
</script> 
</head> 
<body > 
<h3>Frame A</h3> 
<form name="form1" method="post"> 
<SELECT ID="s1" NAME="s1" > 
<OPTION selected></OPTION> 
</SELECT> 
</form> 
</body> 
</html>

2.frame_b.htm: 显示某个身份的所有的城市city的下拉列表
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=GBK"> 
</head> 
<body> 
<h3>Frame B</h3> 
<form name="form2" method="post"> 
<SELECT ID="s2" NAME="s2" > 
<OPTION selected></OPTION> 
</SELECT> 
</form> 
</body> 
</html>

3.frame_c.htm:显示对应的city的描述description.
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=GBK"> 
</head> 
<body> 
<h3>Frame C</h3> 
<div id="description"></div> 
</body> 
</html

4,index.htm: 全局框架,总控页面.
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=GBK"> 
<script language="javascript" type="text/javascript"> 
var provinces = new Array(); 
provinces[0] = "江苏"; 
provinces[1] = "浙江"; 
provinces[2] = "广东"; 
var cities = new Array(); 
cities[0] = new Array(); 
cities[0][0] = "南京"; 
cities[0][1] = "泰州"; 
cities[0][2] = "苏州"; 
cities[1] = new Array(); 
cities[1][0] = "杭州"; 
cities[1][1] = "温州"; 
cities[1][2] = "嘉兴"; 
cities[2] = new Array(); 
cities[2][0] = "广州"; 
cities[2][1] = "深圳"; 
cities[2][2] = "珠海"; 
var descriptions = new Array(); 
descriptions[0] = new Array(); 
descriptions[0][0] = "南京是江苏省的省会,六朝古都,历史遗迹丰富,文化底蕴深厚"; 
descriptions[0][1] = "泰州是千年古郡,胡主席出生的地方,汪老师的故乡,以三麻出名,其中尤以麻将闻名"; 
descriptions[0][2] = "上有天堂,下有苏杭,苏州以园林而出名,著名的园林有“拙政园”、“狮子林”等,人杰地灵,文人墨客辈出。"; 
descriptions[1] = new Array(); 
descriptions[1][0] = "杭州是浙江省的省会,风景优美,人间仙境,所谓“上有天堂,下有苏杭”。"; 
descriptions[1][1] = "温州最出名的就是商人,温州人几乎人人都经商,举国痛恨的温州炒房团就是其中的代表!"; 
descriptions[1][2] = "对嘉兴的了解,还是停留在嘉兴南湖上举行的那次历史性的大会"; 
descriptions[2] = new Array(); 
descriptions[2][0] = "广州是广东省的省会,经济发达,但是犯罪猖獗!"; 
descriptions[2][1] = "深圳是全国第一个经济特区,经济发达,几乎全是外来人口,跟广州一样,治安也不好。"; 
descriptions[2][2] = "珠海是我国第一批沿海开放城市之一,城市优美,典型的海滨城市,适合居住。"; var current_province; 
var current_city; 
function setCity(province, city) 
{ 
// alert("city"); 
//frame_b 
var obj = window.frames.frame_b.document.getElementById("s2"); 
var length = cities[province].length; 
for(i = 0; i < length; ++i) { 
obj[i] = new Option(cities[province][i]); 
obj[i].selected = "false"; 
} 
obj[city].selected = true; 
current_city = city; 
setCityDescription(province, city); 
} 
function setCityDescription(province, city) 
{ 
// alert("description"); 
//frame_c 
var obj = window.frames.frame_c.document.getElementById("description"); 
obj.innerHTML = descriptions[province][city]; 
} 
function setProvince(province) 
{ 
// alert("province"); 
// var obj = window.frames.frame_a.document.getElementById("s1"); 
// var obj = window.frames["frame_a"].document.getElementById("s1"); 
//var obj = window.frames[0].document.getElementById("s1"); 
// var obj = window.frames["frame_a"]; //.document.getElementById("s1"); 
// obj = obj.document.getElementById("s1"); 
var obj = window.frames["frame_a"].document.getElementById("s1"); //由于chrome对跨域访问的检查在本地无法显示,在上传到服务器上显示无误。 
var length = provinces.length; 
for(i = 0; i < length; ++i) { 
obj[i] = new Option(provinces[i]); 
obj[i].selected = "false"; 
} 
obj[province].selected = "true"; 
current_province = province; 
var city = 0; 
setCity(province, city); 
//setCityDescription(province, city); 
} 
function init(province, city) 
{ 
setProvince(province); 
setCity(province, city); 
setCityDescription(province, city); 
var obj = window.frames.frame_a.document.getElementById("s1"); 
obj.onchange = Function("setProvince(this.selectedIndex)"); 
// alert(obj.selectedIndex); 
var obj = window.frames.frame_b.document.getElementById("s2"); 
obj.onchange = Function("setCity(current_province, this.selectedIndex)"); 
// alert(obj.selectedIndex); 
} 
</script> 
</head> 
<frameset cols="35%,65%" onload="init(0, 0);"> 
<frame src="frame_a.htm" name="frame_a"> 
<frameset rows="50%,50%"> 
<frame src="frame_b.htm" name="frame_b"> 
<frame src="frame_c.htm" name="frame_c"> 
</frameset> 
</frameset> 
</html>

5.后记
1)灵活性: function init(province, city) 在页面onload时,可以指定初始显示的城市。竞价排名。
2)可扩展性:可以通过增加数组中的数据源,来增加对更多城市的支持。数据源,可以通过xml文件,或者ajax方式实现动态的数据源,利用dom操作实现。
3)跨域问题: 由于chrome对frame进行跨域检查,所以在本地不经过设置,页面无法显示。不过,上传到服务器上,可以,没有问题。
Javascript 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
jQuery实现高级检索功能
May 28 jQuery
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
固定背景实现的背景滚动特效示例分享
May 19 #Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 #Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 #Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 #Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 #Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 #Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 #Javascript
You might like
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
php笔记之:文章中图片处理的使用
2013/04/26 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
python调用Delphi写的Dll代码示例
2017/12/05 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
Python识别处理照片中的条形码
2020/11/16 Python
如何用Python徒手写线性回归
2021/01/25 Python
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
工程管理专业个人求职信范文
2013/12/07 职场文书
家电业务员岗位职责
2014/03/10 职场文书
食品业务员岗位职责
2014/03/18 职场文书
优秀求职信
2014/05/29 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
七年级话题作文之执着
2019/11/19 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python