js學習筆記(二)下拉選單項選擇並跳轉
阿新 • • 發佈:2019-02-04
這個指令碼最好的一點是:在添加了javascipt函式之後,當新增、修改、或者改變下拉選單選項時,不需要修改函式,只需要設定選單項的值。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <link rel="stylesheet" href="script02.css"> </HEAD> <BODY> <form action="" class="centered"> <select id="newLocation"> <option selected>Select a topic</option> <option value="start01.html">Cross-checking fields</option> <option value="start02.html">Working with radio buttons</option> <option value="start03.html">Setting one field with author</option> <option value="start04.html">Validating Zip codes</option> <option value="start05.html">Validating email address</option> </select> <noscript> <input type="submit" value="Go There"> </noscript> </form> <script> window.onload=initForm; window.onunload=function(){}; function initForm(){ document.getElementById("newLocation").selectedIndex=0; document.getElementById("newLocation").onchange=jumpchange;//修改了物件 } function jumpchange(){ var newLoc=document.getElementById("newLocation"); var newPage=newLoc.options[newLoc.selectedIndex].value; if(newPage!=""){ window.location=newPage; } } </script> </BODY> </HTML>