二级菜单联动(自定义框架)

最新推荐文章于 2024-02-06 18:47:33 发布

转载最新推荐文章于 2024-02-06 18:47:33 发布 · 251 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dashen/p/3895344.html

本文介绍了一个自定义框架，通过选择不同的学科，动态更新显示对应课程列表，展示了HTML、JavaScript和jQuery在动态网页开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 
 7 <script>
 8 //自定义框架
 9 (function(){
10     //命名空间的定义
11     if(!window['cwy']){
12         window['cwy']={};
13     }
14     function $(id){
15         return document.getElementById(id);
16     }
17     window['cwy']['$']=$;
18     
19     //清除元素
20     function ClearElement(e){
21         if(e.length<=0)
22             return;
23         var length=e.length;
24         for(var idx=length;idx>0;idx--)
25             e.options[idx-1]=null;
26         //length=e.length;
27     }
28     window['cwy']['ClearElement']=ClearElement;
29 
30     //更新元素
31     function UpdateElement(e,e_array){
32         var length=e.length;
33         if(length!=0){
34             ClearElement(e);
35         }
36         for(var idx=0;idx<e_array.length;idx++)
37             e.options[idx]=new Option(e_array[idx]);
38         //length=e.length;
39     }
40     window['cwy']['UpdateElement']=UpdateElement;
41 })();
42 
43 window.onload=function(){
44     
45     var n1=['语文','数学','英语','政治','历史','地理'];
46     var n2=['语文','数学','英语','物理','化学','生物'];
47     var subject=cwy.$('subject');
48     subject.onchange=function(){
49         switch(subject.value){
50             case 'wen':cwy.UpdateElement(cwy.$('book'),n1);break;
51             case 'li':cwy.UpdateElement(cwy.$('book'),n2);break;
52             default:cwy.CleaeElement(cwy.$('book'));break;
53         }
54         /*if(subject.value=='wen')
55             cwy.UpdateElement(cwy.$('book'),n1);
56         else if(subject.value=='li')
57             cwy.UpdateElement(cwy.$('book'),n2);
58         else
59             cwy.ClearElement(cwy.$('book'));*/
60     }
61 }
62 
63 </script>
64 
65 </head>
66 
67 <body>
68 <select id="subject">
69     <option value="">--请选择科目--</option>
70     <option value="wen">文科</option>
71     <option value="li">理科</option>
72 </select>
73 <select id="book">
74 </select>
75 </body>
76 </html>