javascript - 选择选项后重定向

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事件select：

步骤1：

<script>
  function redirectChange() {
      var newUrl = this.options[this.selectedIndex].value;
      document.location.href = "http://www.yourbaseurl.com/" + newUrl;
  }

</script>

第 2 步 - 选项 1： 在使用函数连接事件之后addEventListener（我更喜欢这种方式，因为它允许链接 - 请注意，您必须将 html 添加id到select）

<script>
document.getElementById("<insert your select id").addEventListener("change",redirectChange,false);  
</script>

Step2 - 选项 2：onchange或者使用直接事件挂钩 更改 html （我更喜欢前一个）

<form action="...">
    <select name="name" onchange="redirectChange(this)>
        <option value="option1.php">Option 1</option>
        <option value="option2.php">Option 2</option>
    </select>
</form>

工作的jsFiddle：

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

Answer 2

您是要在选择选项本身时重定向，还是在提交表单时重定向，在前一种情况下，您需要在 jquery（客户端）中使用它，而在后者中，您可以在表单提交时在服务器端进行。

对于客户端：

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>

对于服务器端：

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