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

　　运用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>

　　</script>

　　</head>

　　<body >

　　<h3>Frame A</h3>

　　</SELECT>

　　</form>

　　</body>

　　</html>

　　2.frame_b.htm: 显示某个身份的所有的城市city的下拉列表

复制代码代码如下:

　　<html>

　　<head>

　　</head>

　　<body>

　　<h3>Frame B</h3>

　　</SELECT>

　　</form>

　　</body>

　　</html>

　　3.frame_c.htm:显示对应的city的描述description.

复制代码代码如下:

　　<html>

　　<head>

　　</head>

　　<body>

　　<h3>Frame C</h3>

　　</body>

　　</html

　　4,index.htm: 全局框架，总控页面.

复制代码代码如下:

　　<html>

　　<head>

　　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>

　　</html>

　　5.后记：

　　1）灵活性： function init(province, city) 在页面onload时，可以指定初始显示的城市。竞价排名。

　　2）可扩展性：可以通过增加数组中的数据源，来增加对更多城市的支持。数据源，可以通过xml文件，或者ajax方式实现动态的数据源，利用dom操作实现。

　　3）跨域问题：由于chrome对frame进行跨域检查，所以在本地不经过设置，页面无法显示。不过，上传到服务器上，可以，没有问题。

教程首页更多教程