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

时间:2013-01-30 05:45:30

标签: javascript html

我因为无法做到这一点而踢我自己。但我几乎尝试了一切。我只是想在用户单击选项值列表中的选项时将用户重定向到特定页面。这是我当前的代码(这应该更好地解释我的问题):

<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。结果相同。有人可以帮我这个吗?谢谢你们。

6 个答案:

答案 0 :(得分:3)

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

这取决于相对较新的浏览器(querySelectorAlladdEventListener),但原理相同。选项无法触发click,因此您必须使用change上的<select>。不妨整理一下代码。

http://jsfiddle.net/5n5ZE/

答案 1 :(得分:1)

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

 });

答案 2 :(得分:0)

尝试此操作(在每个选项的value中提供页面链接)

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

答案 3 :(得分:0)

您需要将事件处理程序绑定到<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>

答案 4 :(得分:0)

这样可以节省你的行:

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

答案 5 :(得分:0)

试试这个

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