js操纵跨frame的三级联动select下拉选项
2013-05-19 09:54
267 查看
js操纵跨frame的三级联动select下拉选项
运用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,首行缩进。
菜单联动参考界面效果 |
菜单联动试验相关数据
江苏 南京 南京是江苏省的省会,六朝古都,历史遗迹丰富,文化底蕴深厚。 泰州 泰州是千年古郡,胡主席出生的地方,汪老师的故乡,以三麻出名,其中尤以麻将闻名。 苏州 “上有天堂,下有苏杭”,苏州以园林而出名,著名的园林有“拙政园”、“狮子林”等,人杰地灵,文人墨客辈出。 浙江 杭州 杭州是浙江省的省会,风景优美,人间仙境,所谓“上有天堂,下有苏杭”。 温州 温州最出名的就是商人,温州人几乎人人都经商,举国痛恨的温州炒房团就是其中的代表! 嘉兴 对嘉兴的了解,还是停留在嘉兴南湖上举行的那次历史性的大会。 广东 广州 广州是广东省的省会,经济发达,但是犯罪猖獗! 深圳 深圳是全国第一个经济特区,经济发达,几乎全是外来人口,跟广州一样,治安也不好。 珠海 珠海是我国第一批沿海开放城市之一,城市优美,典型的海滨城市,适合居住。 |
写了一个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进行跨域检查,所以在本地不经过设置,页面无法显示。不过,上传到服务器上,可以,没有问题。
见页面:http://www.es.sdu.edu.cn/wzb/select/
相关文章推荐
- js操纵跨frame的三级联动select下拉选项实例介绍
- js操纵跨frame的三级联动select下拉选项实例介绍
- js使用select实现三级联动
- 自制的操作下拉列表框(SELECT)的三个jquery插件(ajax填充、联动、增加选项)
- jquery+html三级联动下拉框及详情页面加载时的select初始化问题
- js入门·表单元素(select下拉列表)制作二级联动菜单和网站导航
- js入门·表单元素(select下拉列表)制作二级联动菜单和网站导航 .txt
- angularjs select 三级联动
- 全国省市区三级城市联动下来选项select插件
- js获取select下拉框选项的值
- 两种js动态三级联动下拉表单测试
- 用js+jsp实现在同一个下拉列表中,动态生成多级select选项
- [js开源组件开发]模拟下拉选项框select
- jQuey/js 省市县三级下拉框联动的回显(简单易懂)
- 简单的js日期三级联动下拉代码
- 下拉框select2二级联动 js+java
- 【JS插件】下拉框通用三级联动选择 省市区三级联动选择
- [威客任务]¥800.00 JS实现网站联动三级选项
- JS和Ajax 实现三级联动的下拉选择
- 省市区三级联动插件:app-jquery-cityselect.js