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

Posted 知

篇首语：不怕读得少，只怕记不牢。本文由小常识网(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

相关参考