從 select 下拉列表中選擇項目時自動重定向

Question

這個頁面按照我想要的方式進行： http://www.web-source.net/javascript_redirect_box.htm

但是我想找到使用 jQuery 的更好方法，誰能指出我使用 jQuery 來完成此任務的好腳本？

Answer 1

您不需要為此預先打包的腳本，只需幾行代碼。

// get your select element and listen for a change event on it
$('#selectEl').change(function() {
  // set the window's location property to the value of the option the user has selected
  window.location = $(this).val();
});

Answer 2

其他人已經就如何做到這一點給出了很好的答案，但是......

只是一個警告，當有人通過鍵盤導航時，IE 處理 select 列表 onChange 與其他瀏覽器非常不同。 它將每個按鍵向上/按鍵向下按下計為 onChange 事件，這意味着您無法通過鍵盤導航重定向 select 列表，從而扼殺了無法使用鼠標的用戶的可訪問性。 （其他瀏覽器在觸發 onChange 之前等待“輸入”事件或 select 列表中的選項卡。）我花了很長時間試圖解決這個問題，但從未完全解決問題。

我不知道 jQuery 是否說明了這一點； 希望它確實如此，為了您的網站的可訪問性。

值得讓 select 列表選擇 go 的位置，然后在它旁邊有一個按鈕實際激活重定向。 （除非您不關心 IE 用戶的可訪問性。）

Answer 3

我沒有對此進行測試，但我認為它等同於您引用的頁面上的示例。

$(document).ready( function() {
   $('#select').change( function() {
      location.href = $(this).val();
   });
});

<select id="select">
    <option value="#">Select a location</option>
    <option value="location.htm">Location</option>
    <option value="other.htm">Other</option>
</select>

Answer 4

使用 jQuery：

$('#selectEl').bind("change keyup",function()
{
  // set the window's location property to the 
  // value of the option the user has selected
  window.location = $(this).val();
});

適用於通常更改選項和箭頭鍵。

你也許可以使用這個擴展： http://plugins.jquery.com/project/mousewheel還沒試過。 :)

您還可以將鼠標選項添加到 bind() 那里。 Go to: api.jquery.com/category/events/mouse-events/ Any function there is a name() for on that page, you can use it's 'name' in bind() above. 就像我對 change()=>'change' 和 mouseup()=>'mouseup' 所做的那樣 - 簡單易懂:)

• 和平！

Answer 5

正如丹尼爾建議的那樣，簡單的答案是 - 你不應該這樣做，這對可用性和可訪問性不利。

Select 列表行為取決於用戶的操作系統、瀏覽器和用戶設置（兩者）的組合。 除此之外，onchange 事件並未以標准方式跨瀏覽器實現。

用戶應該能夠從 select 列表中獲得預期的行為，無論他們是否使用鼠標、鍵盤或鼠標滾輪或（語音、屏幕閱讀器等）。 如果您確實將一個事件綁定到 onchange，那么它絕不應該是一個將用戶的注意力從 select 列表中移開的事件，例如。 頁面重定向。

（我個人經常使用鍵盤瀏覽網站 forms，如果發生這種情況我會尖叫）