下拉列表框处理操作主要使用的是一个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>
效果图如下:
默认状态:
随意选择一个城市时:
选择成功后的结果: