-1

我有第 1 页，在此页面上有一个包含 5 个项目的下拉菜单选项。

Google
Yahoo
Bing
Youtube
MTV

现在，当用户选择上述之一，然后单击页面底部的按钮时，他们将分别重定向到该站点。如何才能做到这一点？

我的想法是将按钮的超链接设置为字符串，然后当用户从菜单中选择一个项目时会产生某种“if-then”条件，这可能是字符串的值。

还是有一种我目前没有看到的更简单的方法？

4

2 回答 2

1

我建议尝试类似于以下内容：

测试.php

<?php
// Check to see if the form has been submitted.
if(isset($_POST['option'])) {
  // If the form has been submitted, force a re-direct to the choice selected.
  header('Location: ' . $_POST['option']);
}
?>
<!DOCTYPE html>
<html>
  <body>
    <form method="post">
      <select name="option">
        <option value="http://www.google.com">Google</option>
        <option value="http://www.yahoo.com">Yahoo</option>
        <option value="http://www.bing.com">Bing</option>
        <option value="http://www.youtube.com">YouTube</option>
        <option value="http://www.mtv.com">MTV</option>
      </select>
      <button type="submit">Go!</button>
    </form>
  </body>
</html>

或者，参考@ITroubs 的评论，您也可以使用 jQuery 执行此操作：

jquery-test.html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
      function goThere() {
        // Grab the drop-down.
        var $select = $('#option');
        // Grab the value of the option selected within the drop-down.
        var url = $select.val();
        // Instruct the window to re-direct to the URL.
        window.location = url;
      }
    </script>
  </head>
  <body>
    <form>
      <select id="option">
        <option value="http://www.google.com">Google</option>
        <option value="http://www.yahoo.com">Yahoo</option>
        <option value="http://www.bing.com">Bing</option>
        <option value="http://www.youtube.com">YouTube</option>
        <option value="http://www.mtv.com">MTV</option>
      </select>
      <button type="button" onclick="goThere();">Go!</button>
    </form>
  </body>
</html>
于 2013-03-20T19:06:57.707 回答
0

我会使用 javascript 和 jquery，如下所示：

<!DOCTYPE html>
<body>
    <select id="dropdown">
        <option id="google" data-url="http://www.google.com" label="Google">Google</option>
        <option id="yahoo" data-url="http://www.yahoo.com" label="Yahoo">Yahoo</option>
    </select>
    <button type="submit" id="submit" value="Go">Go</button>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    (function($){
        $('#submit').on('click', function(e){
            e.preventDefault();
            window.location = $('#dropdown option:selected').data('url');
            return false;
        });
    })(jQuery);
    </script>
</body>
</html>
于 2013-03-20T19:28:17.533 回答