js操纵跨frame的三级联动select下拉选项-javascript-IT落伍者

运用HTMLCSS以及Javascript相关知识编写多窗口多菜单的内容联动

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

菜单联动参考界面效果

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

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

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

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

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

代码如下:
<html>
<head>
<meta  httpequiv="ContentType" content="text/html; charset=GBK">
</script>
</head>
<body >
<h>Frame  A</h>
<form name="form" method="post">
<SELECT ID="s"  NAME="s" >
<OPTION selected></OPTION>
</SELECT>
</form>
</body>
</html>

frame_bhtm: 显示某个身份的所有的城市city的下拉列表

代码如下:
<html>
<head>
<meta  httpequiv="ContentType" content="text/html; charset=GBK">
</head>
<body>
<h>Frame B</h>
<form name="form"  method="post">
<SELECT ID="s" NAME="s" >
<OPTION  selected></OPTION>
</SELECT>
</form>
</body>
</html>

frame_chtm:显示对应的city的描述description

复制代码  代码如下:
<html>
<head>
<meta  httpequiv="ContentType" content="text/html; charset=GBK">
</head>
<body>
<h>Frame C</h>
<div  id="description"></div>
</body>
</html

indexhtm: 全局框架总控页面

代码如下:
<html>
<head>
<meta  httpequiv="ContentType" content="text/html; charset=GBK">
<script  language="javascript" type="text/javascript">
var provinces = new  Array();
provinces[] = "江苏";
provinces[] = "浙江";
provinces[] =  "广东";
var cities = new Array();
cities[] = new Array();
cities[][] = "南京";
cities[][] = "泰州";
cities[][] = "苏州";
cities[] = new Array();
cities[][] = "杭州";
cities[][] = "温州";
cities[][] = "嘉兴";
cities[] = new Array();
cities[][] = "广州";
cities[][] = "深圳";
cities[][] = "珠海";
var descriptions = new  Array();
descriptions[] = new Array();
descriptions[][] =  "南京是江苏省的省会六朝古都历史遗迹丰富文化底蕴深厚";
descriptions[][] =  "泰州是千年古郡胡主席出生的地方汪老师的故乡以三麻出名其中尤以麻将闻名";
descriptions[][] =  "上有天堂下有苏杭苏州以园林而出名着名的园林有“拙政园”“狮子林”等人杰地灵文人墨客辈出";
descriptions[] = new  Array();
descriptions[][] = "杭州是浙江省的省会风景优美人间仙境所谓“上有天堂下有苏杭”";
descriptions[][] = "温州最出名的就是商人温州人几乎人人都经商举国痛恨的温州炒房团就是其中的代表！";
descriptions[][] = "对嘉兴的了解还是停留在嘉兴南湖上举行的那次历史性的大会";
descriptions[] =  new Array();
descriptions[][] = "广州是广东省的省会经济发达但是犯罪猖獗！";
descriptions[][] = "深圳是全国第一个经济特区经济发达几乎全是外来人口跟广州一样治安也不好";
descriptions[][] = "珠海是我国第一批沿海开放城市之一城市优美典型的海滨城市适合居住";

var  current_province;
var current_city;
function setCity(province city)
{
// alert("city");
//frame_b
var obj =  windowframesframe_bdocumentgetElementById("s");
var length =  cities[province]length;
for(i = ; 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 =  windowframesframe_cdocumentgetElementById("description");
objinnerHTML  = descriptions[province][city];

}

function setProvince(province)
{
// alert("province");
// var obj =  windowframesframe_adocumentgetElementById("s");
// var obj =  windowframes["frame_a"]documentgetElementById("s");
//var obj =  windowframes[]documentgetElementById("s");
// var obj =  windowframes["frame_a"]; //documentgetElementById("s");
// obj =  objdocumentgetElementById("s");
var obj =  windowframes["frame_a"]documentgetElementById("s");  //由于chrome对跨域访问的检查在本地无法显示在上传到服务器上显示无误
var length = provinceslength;
for(i = ; i < length; ++i) {
obj[i] = new Option(provinces[i]);
obj[i]selected = "false";
}
obj[province]selected = "true";
current_province = province;
var city = ;
setCity(province city);
//setCityDescription(province city);
}

function init(province  city)
{
setProvince(province);
setCity(province city);
setCityDescription(province city);
var obj =  windowframesframe_adocumentgetElementById("s");
objonchange =  Function("setProvince(thisselectedIndex)");
// alert(objselectedIndex);

var obj = windowframesframe_bdocumentgetElementById("s");
objonchange = Function("setCity(current_province thisselectedIndex)");
// alert(objselectedIndex);
}
</script>
</head>
<frameset cols="%%" onload="init( );">
<frame  src="frame_ahtm" name="frame_a">
<frameset rows="%%">
<frame src="frame_bhtm" name="frame_b">
<frame  src="frame_chtm" name="frame_c">
</frameset>
</frameset>
</html>

后记
）灵活性 function init(province city) 在页面onload时可以指定初始显示的城市竞价排名
）可扩展性可以通过增加数组中的数据源来增加对更多城市的支持数据源可以通过xml文件或者ajax方式实现动态的数据源利用dom操作实现
）跨域问题由于chrome对frame进行跨域检查所以在本地不经过设置页面无法显示不过上传到服务器上可以没有问题