第6讲：JavaScript在表单元素上的应用（二）
6.1 下拉菜单的使用
下拉菜单的HTML标记及其语法：
<select size="5" name="myselect" multiple>
<option value="面包">面包</option>
<option value="米饭">米饭</option>
<option value="炒菜">炒菜</option>
<option value="汉堡">汉堡</option>
<option value="水果">水果</option>
<option value="饼干">饼干</option>
</select>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<select size="1" name="myselect">
<option value="面包">面包</option>
<option value="米饭">米饭</option>
<option value="炒菜">炒菜</option>
<option value="汉堡">汉堡</option>
<option value="水果">水果</option>
<option value="饼干">饼干</option>
</select>
下拉菜单的应用示例见〔示例一〕。
〔示例一〕
<html>
<head>
<title>Select Sample...</title>
<script language="javascript">
<!--
var food="";
function check()
{
for (i=0;i<document.form.myselect1.length;i++)
{
if (document.form.myselect1[i].selected);
{
var drink=document.form.myselect1[i].value;
}
}
for (j=0;j<document.form.myselect2.length;j++)
{
if (document.form.myselect2[j].selected);
{
food=food+document.form.myselect2[j].value+" ";
}
}
var output_window=open("","mywin","menubar=no,width=400,height=80,resizable=yes");
output_window.document.writeln("<html><head><title>输出结果</title></head>");
output_window.document.writeln("<body bgcolor=orange>");
output_window.document.writeln("<p>您选择的饮料是：",drink,"<br>");
output_window.document.writeln("<p>您选择的主食是：",food);
}
//-->
</script>
</head>
<body>
<form name="form">
<select size="1" name="myselect1">
<option value="可乐">可乐</option>
<option value="芬达">芬达</option>
<option value="雪碧">雪碧</option>
<option value="牛奶">牛奶</option>
<option value="咖啡">咖啡</option>
<option value="果珍">果珍</option>
</select>
<p>
<select size="5" name="myselect2" multiple>
<option value="面包">面包</option>
<option value="米饭" selected>米饭</option>
<option value="炒菜" selected>炒菜</option>
<option value="汉堡">汉堡</option>
<option value="水果">水果</option>
<option value="饼干">饼干</option>
</select>
<p>
<input type="button" name="cmdok" value="查看选择的结果" onclick="check()">
</form>
</body>
</html>
6.2 表单元素对事件的触发和处理
在JavaScript中实现聚焦和失去聚焦的方法与在VBScript中的方法基本一致，具体使用方法见〔示例二〕。
〔示例二〕
<html><head><title>Focus and blur Sample...</title>
<script language="javascript">
<!--
function changefocus()
{
document.form1.text_name.blur();
document.form1.button1.focus();
}
function check()
{
var text=document.form1.text_name.value;
if (text.indexOf("@")!=-1)
{
alert("地址正确！");
}
else
alert("请输入正确的E-mail地址，谢谢！");
}
//-->
</script>
</head>
<body>
<form name="form1">
<input type="text" name="text_name" value="" size="20" onmouseout="changefocus()"><p>
<input type="button" value="发送数据" name="button1" onclick="check()">
</form></body></html>
图6-3 焦点的获得与取消
6.3 综合表单校验处理
用JavaScript对表单元素进行客户端的校验是JavaScript的主要应用之一，这样做的好处是能有效降低Web服务器的负载，具体示例如下。
〔示例三〕
综合示例（操作界面用可视化工具制作，数据的合理性写在<head>与</head>之间）。
