正如标题所暗示的那样，我正在尝试显示查询结果并且它工作正常，但它会自动在搜索按钮下方显示结果，当它应该等待按钮被按下然后重新加载页面并显示结果时。我有点确定这是代码的问题，但我找不到在哪里。我知道这是一个愚蠢的问题，但感谢所有的帮助。
这是我的代码：
<?php
mysql_connect('localhost', 'root', 'Passw0rd') or die(mysql_error());
mysql_select_db("cvtool") or die(mysql_error());
include("include/session.php");
$username = $_SESSION['username'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!--The viewport tag is used in order to scale the page properly inside any screen size -->
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>CV Tool</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/main.css"/>
<!--Import JQuery from stored file -->
<script src="js/jquery-1.11.1.min.js"></script>
<!--Import JQuery from Google's Content Delivery Network -->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">-->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/backToTop.js"></script>
</head>
<body>
<!--Big wrapper contains the whole site (header,navigation menu,....,footer-->
<div id="big_wrapper">
<header id="top_header">
<a href="main.php"><img src="images/cvlogo.png"> </a>
</header>
<br>
<nav class="clearfix">
<ul class="clearfix">
<li><a href="main.php">Home</a></li>
<?php
/**
* User has already logged in, so display relavent links, including
* a link to the admin center if the user is an administrator.
*/
if($session->logged_in){
echo "<li><a href='"search.php'">Search</a></li>"
."<li><a href='"myCVs.php'">My CV(s)</a></li>"
."<li><a href='"userinfo.php?user=$session->username'">My Account</a></li>"
;
echo "<li><a href='"process.php'">Logout</a></li>";
}
else
?>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
<section id="main_section">
<?php
/**
* User not logged in, display the login form.
* If user has already tried to login, but errors were
* found, display the total number of errors.
* If errors occurred, they will be displayed.
*/
if($form->num_errors > 0){
echo "<font size='"2'" color='"#ff0000'">".$form->num_errors." error(s) found</font>";
}
?>
<form action="search.php" method="GET" >
<h1>Search for an CV</h1>
<h3>Department</h3>
<br/>
<select id="dropDown">
<option value="">Choose a department</option>
<option value="Comp">Computer Science</option>
<option value="Bus">Business Studies</option>
<option value="Psy" >Psychology</option>
<option value="Eng">English Studies</option>
</select>
<br/>
<h3>Skills</h3>
<br/>
<div id="Comp"class="drop-down-show-hide">
<input type="checkbox" name="whatever" />
Java
<input type="checkbox" name="whatever" />
AI
<input type="checkbox" name="whatever" />
Web Development
</div>
<div id="Bus"class="drop-down-show-hide">
<input type="checkbox" name="whatever" />
Business 1
<input type="checkbox" name="whatever" />
Business 2
<input type="checkbox" name="whatever" />
Business 3
</div>
<div id="Psy"class="drop-down-show-hide">
<input type="checkbox" name="whatever" />
Psychology 1
<input type="checkbox" name="whatever" />
Psychology 2
<input type="checkbox" name="whatever" />
Psychology 3
</div>
<div id="Eng"class="drop-down-show-hide">
<input type="checkbox" name="whatever" />
English Studies 1
<input type="checkbox" name="whatever" />
English Studies 2
<input type="checkbox" name="whatever" />
English Studies 3
</div>
<script>
$(document).ready();
$('.drop-down-show-hide').hide();
$('#dropDown').change(function () {
$(this).find("option").each(function () {
$('#' + this.value).hide();
});
$('#' + this.value).show();
});
</script>
</form>
<form action="search_result.php">
<input type="submit" name="search" id="search" value="Search" />
<div id="search"></div>
<script>
$(document).ready(function(){
$("#dropDown").change(function(){
var data = $(this).val();
$.ajax({
type:'POST',
data:'search_value='+data,
url:'search_result.php',
success:function(data){
$("#search").html(data);
}
});
});
});
</script>
</form>
</section>
<footer id="the_footer">
City CV Tool 2014
</footer>
<a href="#" class="back-to-top"></a>
</div>
</body>
</html>
就是因为这行
$("#dropDown").change(function(){
在表单中添加一个提交按钮，如果这是您想要的，然后运行该功能
<input type="submit" value="Submit" />
根据 rwacarter 在下面关于可访问性的正确评论后编辑
将 Id 添加到表单标记
<form id="searchformSubmit"
然后做
$("#searchformSubmit").on('submit',function(){
如果用户按 Enter 键提交而不是按钮，前提是页面上只有一个表单，这也应该有效
页面重新加载的原因是 HTML 表单中的任何<button>或<input type='submit'>都将重新加载页面，除非您对它们有onClick='return false;'。我认为您需要补充：
onClick="startsearch();return false;"
在提交按钮上。您还必须随之发送表单数据。为此，请用这个创建一个变量：
var form_data = $('#form').serialize();
并发送：
$.post('search_result.php', {form: form_data}, function(data) {$("#search").html(data);})
当您的下拉列表更改（单击、用户输入等）时，将调用您的 ajax 调用（结果搜索），但您应该将操作绑定到表单单击。
$(document).ready(function(){
$("#search").click(function(){
var data = $("#dropDown").val();
$.ajax({
type:'POST',
data:'search_value='+data,
url:'search_result.php',
success:function(data){
$("#search").html(data);
}
});
});
});
此外，这不是在表单中指定操作所必需的，但它会触发表单操作并将您重定向到页面search_result.php，我建议您更新它并设置action="#"