單擊選擇列表中的選項時如何重定向用戶？

Question

我因為無法做到這一點而踢我自己。 但我幾乎嘗試了一切。 我只是想在用戶單擊選項值列表中的選項時將用戶重定向到特定頁面。 這是我當前的代碼（這應該更好地解釋我的問題）：

<select name="test_redirect">
<option value="1" onclick="document.location = 'http://localhost/shop?item=1';">Item 1</option>
<option value="2" onclick="document.location = 'http://localhost/shop?item=2';">Item 2</option>
<option value="3" onclick="document.location = 'http://localhost/shop?item=3';">Item 3</option>
</select>

我也試過onChange。 結果相同。 有人可以幫我這個嗎？ 感謝大伙們。

Answer 1

document.querySelectorAll("[name=test_redirect]")[0].addEventListener('change',
   function () {
       window.location = "http://localhost/shop?item=" + this.value;
   });

這取決於一個相對較新的瀏覽器（使用querySelectorAll和addEventListener ），但原理是相同的。 click不會在選項上觸發，因此您必須對<select>進行change 。 不妨整理一下代碼。

http://jsfiddle.net/5n5ZE/

Answer 2

<select id="test_redirect">
<option value="1">Item  1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>

JavaScript的

var val = document.getElementById("test_redirect").value;
window.location.href = "http://localhost/shop?item=" + val; 

jQuery的

$("#test_redirect").change(function(){

    var val = $(this).val();
    window.location.href = "http://localhost/shop?item=" + val;

 });

Answer 3

試試這個（在每個選項的value中給出頁面的鏈接）

<select name="test_redirect" onchange="window.location.href=this.form.test_redirect.options[this.form.test_redirect.selectedIndex].value">

Answer 4

您需要將事件處理程序綁定到<select>而不是單個選項：

<select name="test_redirect" onchange="location.assign('http://localhost/shop?item=' + this.options[this.selectedIndex].value)">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>

Answer 5

這將節省你的線路：

<select onchange="location = this.options[this.selectedIndex].value;">
<option value="1">Item  1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>

Answer 6

嘗試這個

<select name="test_redirect" onchange="location.href='http://localhost/shop?item='+this.value">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>