Dynamic Menus

   有时往往需要根据一个表单设置另一个表单，比如根据国家设置省份，这里是根据月份设置天数的例子。

　　这是相关的HTML代码：

　　

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Dynamic Menus</title>
 5     <script src="p6_2.js"></script>    
 6 </head>
 7 <body>
 8 <form action="#">
 9     <select id="months">
10         <option value="">Month</option>
11         <option value="0">January</option>
12         <option value="1">February</option>
13         <option value="2">March</option>
14         <option value="3">April</option>
15         <option value="4">May</option>
16         <option value="5">June</option>
17         <option value="6">July</option>
18         <option value="7">August</option>
19         <option value="8">September</option>
20         <option value="9">October</option>
21         <option value="10">November</option>
22         <option value="11">December</option>
23     </select>
24     &nbsp;
25     
26     <select id="days">
27         <option>Day</option>
28     </select>
29 
30 </form>
31 
32 </body>
33 </html>

    以下是相关的js代码：

 

　　

 1 window.onload = initForm;
 2 
 3 function initForm(){
 4     
 5     document.getElementById("months").selectedIndex = 0;
 6     document.getElementById("months").onchange = getDays;//菜单变化时调用getDays()函数
 7     
 8 }
 9 
10 function getDays(){
11     
12     var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);//创建一个数组用于存储每月所对应的天数
13     var monthStr  = this.options[this.selectedIndex].value//由菜单属性selectedIndex得到相应的Options即月份
14     
15     
16     if(monthStr!=""){      //判断是否选择了月份
17         var theMonth = parseInt(monthStr);
18         document.getElementById("days").length = 0;//重置Days菜单
19         for(var i=0;i<monthDays[theMonth];i++){   //根据选择的月份得到对应的天数再用for循环创建对应的Days表单
20             document.getElementById("days").options[i] = new Option(i+1);
21         }
22     }
23 }

  应该去学习selectedIndex的使用，可以通过 document.getElementById("days").options[i] = new Option(i+1);创建菜单的选项。

 
posted @ 2015-11-24 09:49  F-victor  阅读(158)  评论(0)    收藏  举报