javascript学习（7）:动态地改变菜单&选择并转移导航菜单.
需要了解的HTML 知识——表单
------------------------------------------------------------------
标 签 属 性 意 义
form 这个标签包含下面的任何标签，构成有效的HTML 表单
action 在Web 服务器上处理数据的服务器端CGI 的名称
input 这个标签显示不同类型的表单字段，具体取决于type 属性的值
class 分配给这个元素的类名
id 分配给这个元素的唯一id。与其他JavaScript 对象一样，不允许有空格和标点符号，并且不能以数字开头
name 主要用来对单选按钮进行分组
maxlength 用户可以在这个字段中输入的数据的最大长度
size 在页面上显示的字符数量
type 所需的输入控件类型，有效值是button、checkbox、image、password、radio、reset、submit 和text
value 预先为这个表单字段设置的值
label 用来为没有内置标签的控件指定标签，比如文本字段、复选框、单选按钮和菜单
--------------------------------------------------------------------------------
选择这个菜单中的任何选项，就会直接跳到对应的页面，而不需要单独的Go 按钮
<!DOCTYPE html>
<html>
<head>
<title>Select and Go Navigation</title>
<script src="script01.js"></script>
<link rel="stylesheet" href="script01.css">
</head>
<body>
<form action="gotoLocation.cgi" class="centered">
<select id="newLocation">
<option selected>Select a topic</option>
<option value="script06.html">Cross-checking fields</option>
<option value="script07.html">Working with radio buttons</option>
<option value="script08.html">Setting one field with another</option>
<option value="script09.html">Validating Zip codes</option>
<option value="script10.html">Validating email addresses</option>
</select>
<noscript>
<input type="submit" value="Go There!">
</noscript>
</form>
<script>
window.onload = initAll;
function initAll(){
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = changeNet;
}
function changeNet(){
var newLoc = document.getElementById("newLocation");
var newPage = newLoc.options[newLoc.selectedIndex].value;
if(newPage != ""){
window.location = newPage;
}
}
</script>
</body>
</html>
动态地改变菜单
点击选择对应的月份，天数会自动选择上
HTML 列出了月份，但是没有列出天
<html>
<head>
<title>Dynamic Menus</title>
<script src="script02.js"></script>
</head>
<body>
<form action="#">
<select id="months">
<option value="">Month</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select id="days">
<option>Day</option>
</select>
</form>
</body>
</html>
脚本
window.onload = initForm;
function initForm() {
document.getElementById("months").selectedIndex = 0;
document.getElementById("months").onchange = populateDays;
}
function populateDays() {
var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var monthStr = this.options[this.selectedIndex].value;
if (monthStr != "") {
var theMonth = parseInt(monthStr);
document.getElementById("days").options.length = 0;
for(var i=0; i<monthDays[theMonth];i++) {
document.getElementById("days").options[i] = new Option(i+1);
}
}
}
提示
monthDays 数组包含每个月的天数，如果不是闰年的话，这种方式就没问题。要想让脚本能够
处理闰年，就需要改变monthDays 中二月的