Question

我有这个脚本，它为我提供了用户菜单的可能性。

如何在做出特定选择后让用户重定向到特定页面？

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

选项1 = option1.php
选项2 = option2.php

Answer 1

您可以使用onchange的{{1}}事件：

第1步：

select

第2步 - 选项1： 函数使用<script> function redirectChange() { var newUrl = this.options[this.selectedIndex].value; document.location.href = "http://www.yourbaseurl.com/" + newUrl; } </script>挂钩事件后（我更喜欢这种方式，因为它允许链接 - 请注意您必须向addEventListener添加html id）

select

第2步 - 选项2： 或者使用直接<script> document.getElementById("<insert your select id").addEventListener("change",redirectChange,false); </script>事件挂钩更改html（我更喜欢上一个）

onchange

工作jsFiddle：

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

Answer 2

你想重定向选项本身，还是提交表格，在前一种情况下，你需要在jquery（客户端），在后者，你可以在表单提交服务器端。< / p>

对于客户端：

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>

对于服务器端：

您需要根据您收到的参数在表单提交操作中编写重定向逻辑。

选择后重定向选项

2 个答案: