javascript - 单击选择列表中的选项时如何重定向用户？

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;
   });

This depends on a relatively new browser (with querySelectorAll and addEventListener), but the principle's the same. click doesn't get triggered on options, so you have to go with change on the <select>. Might as well consolidate the code a bit too.

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>