下拉列表框处理操作主要使用的是一个onchange的事件,此事件描述的是内容改变后行为。
范例:观察下拉列表框的事件处理
代码:
<!doctype html>
<html lang = "zh-CN">
<head> <meta charset="utf-8">
<meta name="description" content="this is a checkbox example">
<meta name="keywords" content="checkbox,html,js">
<title>下拉框的测试</title> <script type="text/javascript">
window.onload = function () {
document.getElementById('city').addEventListener('change',function(){
alert("当前选项是:"+this.value);
},false);
}
</script> </head>
<body>
<form action="">
请选择城市:
<select id = "city">
<option value="BJ - 北京">北京</option>
<option value="SH - 上海">上海</option>
<option value="NJ - 南京">南京</option>
<option value="TJ - 天津">天津</option>
<option value="HF - 合肥">合肥</option>
<option value="WH - 武汉">武汉</option>
</select>
</form>
</body>
</html>
效果图如下:
默认状态:
随意选择一个城市时:
选择成功后的结果: