2013-03-20 50 views
-1

我已经得到了第1页,在这个页面上有一个选项,下拉菜单中有5个项目。url有条件的选项框值

现在,当用户选择上述之一,然后点击页面的BUTTOM按钮,它们分别重定向到该网站。如何才能做到这一点?

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

还是有更简单的方法,我目前只是没有看到?

+0

你可以使用jQuery动态设置,看起来像一个按钮锚的href值.... – ITroubs 2013-03-20 19:04:41

回答

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