Question

我想在选择一个选项时重定向url并单击go按钮如何重定向按钮。我在同一个网址上重定向按钮。

    <?php
global $wpdb;
echo "hello";
// $sql="SELECT  path FROM `grillM_blogs` WHERE blog_id";
  $sql="SELECT * FROM grillM_blogs";
$results = $wpdb->get_results($sql);
//print_r($results); 
?>
<form id="search_mini_form">
<select class="mypopup" id="websites">
        <option>select location</option>
<?php
foreach($results as $res) {
    $newstring = str_replace("/"," ",$res->path);
    $newstring=ucwords($newstring);
     ?>
        <option value="<?php echo $res->path;?>"><?php echo $newstring;?></option>
         <?php } ?> 
        </select>
       <button class="go">Go</button>
<a href='' class='close'>Skip</a>

</div>
</div>
</form>
<script>
$(document).ready(function(){
    $(".go").change(function(){
            var go_to_url = $("#website").find("option:selected").val();
            window.location = go_to_url 
           // alert("hello");       
});
});
</script>

Answer 1

第一个建议是简单地让onchange事件更改位置href而不需要点击按钮，但是如果你想保持＆＃34;去＆＃34;按钮，然后您可以将其转换为<a>链接，然后在js中有一个用于更改链接的href的选择列表的onchange函数。请注意，我使用Bootstrap将链接设置为按钮的样式，但也可以通过其他方式完成。我也减少了你的代码并丢失了这个例子的php，以显示＆＃34; go＆＃34;的动态变化。链接href（谷歌或SO取决于选择）。尝试更改选择，然后将鼠标悬停在go按钮上以查看新的href。

＆＃13;

$(function() 
	{  
		$('#websites').on('change',function(){
		var loc=$(this).val();
		$('.go').attr('href',loc);
		})
	})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" /> 
    <title>Select Demo</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
	<select class="mypopup" id="websites">
        <option>select location</option>
        <option value="https://www.google.com.au/?gws_rd=ssl">Google</option>
        <option value="http://stackoverflow.com/">Stack Overflow</option>
        </select>
		
      <a href="#" class="button go btn btn-success btn-xs">Go</a>
		<a href='' class='close'>Skip</a>

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>
</html>

＆＃13;

如何使用提交按钮重定向下拉列表

1 个答案: