首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 19, 2013

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

考察学生关于frame、浏览器对象，以及表单控件的概念，javascript事件触发机制和程序设计，
以及用CSS来组织文字展示的掌握程度，使学生对DHTML有更加深刻的理解。
实验内容【必做】
（１）建立一个包含三个frame的窗口
（２）第一个frame1中包含一个select，内容是中国的各个省
（３）第二个frame2中同样含有一个select，内容是各省的地级市
（４）第三个frame3用来显示关于某地市的介绍。
（５）当在frame1的selecet中选择某个省，则frame2中的select自动把可选项变为该省下的各地市
（６）当在frame2中的select选中某地市后，在frame3中显示该地市的介绍
（７）介绍要求用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进行跨域检查，所以在本地不经过设置，页面无法显示。不过，上传到服务器上，可以，没有问题。

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
完美实现八种js焦点轮播图（上篇）
Jul 18 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 Javascript
固定背景实现的背景滚动特效示例分享
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
数据表(1) 字符集(1) Keras(3) character(1) 三子棋(2) variable_scope(1) mysql(6) 神经网络(7) data(4) name_scope (1)
You might like
PHP新手上路（十）
2006/10/09 PHP
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
Nodejs抓取html页面内容（推荐）
2016/08/11 NodeJs
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
python使用wxpython开发简单记事本的方法
2015/05/20 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
点球小游戏python脚本
2018/05/22 Python
python检测IP地址变化并触发事件
2018/12/26 Python
python基于SMTP协议发送邮件
2019/05/31 Python
django中瀑布流写法实例代码
2019/10/14 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
Python代码需要缩进吗
2020/07/01 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
台湾三立电视电商平台：电电购
2019/09/09 全球购物
俄罗斯品牌服装和鞋子在线商店：BRIONITY
2020/03/26 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
优秀士兵个人事迹材料
2014/01/19 职场文书
工厂会计员职责
2014/02/06 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
软件项目经理岗位职责
2015/04/01 职场文书