JavaScript select onChange 跳頁選單

HTML 中常見的下拉式選單 select option 除了可以用在表單(HTML Form)中之外,也可以用在網頁中的其他地方,再透過 JavaScript 的事件來做出一些特效,本篇就是要介紹 select onChange 來製作跳頁選單,僅需簡單的 JavaScript 語法,就可以做出讓網友在下拉選單中選擇想去的網頁,選擇完成後直接讓頁面跳到該網頁,請看以下範例。

JavaScript select onChange 跳頁選單範例
<select onChange="location = this.options[this.selectedIndex].value;">
<option value="#">請選擇</option>
<option value="https://www.google.com.tw">Google 台灣</option>
<option value="http://tw.yahoo.com">Yahoo! 奇摩</option>
<option value="http://www.php.net">PHP.net</option>
</select>
呈現結果


這個 select 選單的第一行我們用了『onChange="location = this.options[this.selectedIndex].value;"』這樣的語法,當選單被改變的時候,會執行等號右邊的 JavaScript 程式碼,而 location 用來執行跳頁,『 this.options[this.selectedIndex].value』用來抓取網友所選擇的項目值,可以看到 select 的每個選項(option)都有一個 value,設定每個 value 的值為不同的網址,這樣 JavaScript 就知道要前往哪個網頁囉!(第一個 option 由於僅用來顯示「請選擇」的文字,所以 value 的值只給 # 字號,這樣選擇第一項就不會跳到別的網頁)

JavaScriptonChange 事件通常用來根據網友的動作而執行程式碼,除了可以用在 select option 下拉式選單之外,也可以用在其他的表單欄位,例如 text、textarea ... 等,只要是當網友去改變欄位值而需要觸發事件的時候都可以適用。

延伸閱讀
HTML Form 表單
HTML select option 下拉式選單
HTML textarea
HTML input text 文字輸入欄位
JavaScript onChange 事件
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C