当前位置:编程学习 > JS >>

js操纵跨frame的易做图联动select下拉选项

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,首行缩进。

 


菜单联动参考界面效果
 

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

 

菜单联动试验相关数据

江苏

  南京  南京是江苏省的省会,六朝古都,历史遗迹丰富,文化底蕴深厚。

  泰州  泰州是千年古郡,易做图出生的地方,汪老师的故乡,以三麻出名,其中尤以麻将闻名。

  苏州  “上有天堂,下有苏杭”,苏州以园林而出名,著名的园林有“拙政园”、“狮子林”等,人杰地灵,文人墨客辈出。

 

浙江

    杭州 杭州是浙江省的省会,风景优美,人间仙境,所谓“上有天堂,下有苏杭”。

    温州 温州最出名的就是商人,温州人几乎人人都经商,举国痛恨的温州炒房团就是其中的代表!

    嘉兴 对嘉兴的了解,还是停留在嘉兴南湖上举行的那次历史性的大会。

 

广东

    广州 广州是广东省的省会,经济发达,但是犯罪猖獗!

    深圳 深圳是全国第一个经济特区,经济发达,几乎全是外来人口,跟广州一样,治安也不好。

    珠海 珠海是我国第一批沿海开放城市之一,城市优美,典型的海滨城市,适合居住。
 

 

 

写了一个易做图 味 不是太浓的js代码,供各位看官和懒蛋们享用。

上代码:

1. frame_a.htm:  显示省份province的下拉列表.


[html] <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> 

<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]  <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> 

<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]  <html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=GBK"> 
    </head> 
 
    <body> 
        <h3>Frame C</h3> 
        <div id="description"></div> 
    </body> 
</html 

<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]  <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] = "南京"; 
  &nb

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,