已選擇選項後的重定向

Question

我有這個腳本，它給了我可能的用戶菜單。

如何讓用戶在進行特定選擇後重定向到特定頁面？

<form action="..."> 
    <select name="name"> 
     <option>Option 1</option> 
     <option>Option 2</option> 
    </select> 
</form> 

選項1 = option1.php
選項2 = option2.php

Answer 1

你想上選擇選項本身的重定向，或提交表單的，在前者的情況下，你需要它的jQuery（客戶端），並在後者，你可以做到這一點在服務器端上表單提交。

用於客戶端：

jQuery("#select_id").on('change', function(){ 
    var urlPath = jQuery(this).val().data('url'); 
    window.location.href = "http://www.projecturl.com/"+urlPath; 
}); 

給出的選擇ID看起來如下，

<select id="select_id"> 
    <option data-url="option1.php">Option 1</option> 
    <option data-url="option2.php">Option 2</option> 
</select> 

用於服務器端：

你需要寫在表單提交動作重定向邏輯取決於你收到的參數。

Answer 2

可以使用onchange事件select的：

步驟1：

<script> 
    function redirectChange() { 
     var newUrl = this.options[this.selectedIndex].value; 
     document.location.href = "http://www.yourbaseurl.com/" + newUrl; 
    } 

</script> 

步驟2 - 選項1： 功能後掛鉤使用addEventListener事件（我喜歡這種方式，因爲它允許鏈接 - 請注意，您必須添加一個HTML id到select）

<script> 
document.getElementById("<insert your select id").addEventListener("change",redirectChange,false); 
</script> 

第二步 - 選項2： 或改變HTML直接onchange事件掛鉤（我更喜歡以前的）

<form action="..."> 
    <select name="name" onchange="redirectChange(this)> 
     <option value="option1.php">Option 1</option> 
     <option value="option2.php">Option 2</option> 
    </select> 
</form> 

工作的jsfiddle：

http://jsfiddle.net/mapVz/1/