JavaScript select onChange jump page menu

 The common drop-down menu select option in HTML can not only be used in the form ( HTML Form ), but also in other places in the web page, and then make some special effects through JavaScript events. This article is about select onChange To make a page skipping menu, only simple JavaScript syntax is needed to make users choose the webpage they want to go to in the drop-down menu. After the selection is completed, the page jumps to the webpage directly. Please see the following example.

JavaScript select onChange page skipping menu example

<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>

Present results

please chooseGoogle Taiwan Yahoo! QimoPHP.net

In the first line of this select menu, we use the syntax "onChange="location = this.options[this.selectedIndex].value;"". When the menu is changed, the JavaScript code on the right side of the equal sign will be executed. And location is used to perform page jump, "this.options[this.selectedIndex].value" is used to grab the value of the item selected by netizens, you can see that each option of select has a value, set each The value of value is a different URL, so that JavaScript knows which page to go to! (Since the first option to display only "select" text, so the value of value only to the # font size, so choose the first one will not jump to another page)

JavaScript is onChange events are often used according to friends Action to execute the code, in addition to the select option drop-down menu, it can also be used in other form fields, such as text, textarea... etc., as long as the netizens change the field value and need to trigger an event It can be applied at any time.