-1

ページ 1 を取得しました。このページには、5 つの項目のドロップダウン メニューを含むオプションがあります。

Google
Yahoo
Bing
Youtube
MTV

ユーザーが上記のいずれかを選択してページの下部にあるボタンをクリックすると、それぞれそのサイトにリダイレクトされます。これはどのように行うことができますか？

私の考えは、ボタンのハイパーリンクを文字列として設定し、ユーザーがメニューから文字列の値を変更する項目を選択したときに、何らかの「if-then」条件を設定することです。

それとも、私が現在見ていないもっと簡単な方法はありますか?

4

2 に答える 2

1

次のようなものを試すことをお勧めします。

test.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 に答える