知识大全 js操纵跨frame的三级联动select下拉选项

Posted 2022-07-14 知

篇首语：不怕读得少，只怕记不牢。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 js操纵跨frame的三级联动select下拉选项相关的知识，希望对你有一定的参考价值。

　　运用HTML CSS以及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_a : 显示省份province的下拉列表

代码如下: <> <head> <meta equiv="Content Type" content="text/; 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> </>

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

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

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

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

　　 index : 全局框架总控页面

代码如下: <> <head> <meta equiv="Content Type" content="text/; 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 = window frames frame_b document getElementById("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 = 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("s "); // var obj = window frames["frame_a"] document getElementById("s "); //var obj = window frames[ ] document getElementById("s "); // var obj = window frames["frame_a"]; // document getElementById("s "); // obj = obj document getElementById("s "); var obj = window frames["frame_a"] document getElementById("s "); //由于chrome对跨域访问的检查在本地无法显示在上传到服务器上显示无误 var length = provinces length; 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 = window frames frame_a document getElementById("s "); obj onchange = Function("setProvince(this selectedIndex)"); // alert(obj selectedIndex); var obj = window frames frame_b document getElementById("s "); obj onchange = Function("setCity(current_province this selectedIndex)"); // alert(obj selectedIndex); </script> </head> <frameset cols=" % %" onload="init( );"> <frame src=frame_a name=frame_a> <frameset rows=" % %"> <frame src=frame_b name=frame_b> <frame src=frame_c name=frame_c> </frameset> </frameset> </> cha138/Article/program/Java/JSP/201311/20097