下拉列表框處理操作主要使用的是一個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>
效果圖如下:
默認狀態:
隨意選擇一個城市時:
選擇成功后的結果: