我有一个有2个组合框的表单:规约框和分类框，规约框在我的页面的顶部，但分类框在中间。我的问题是，当我从中间的分类框中选择一个项目时，页面会刷新并返回顶部。那么如何才能保持相同的定位。下面是我的代码:
<form id = "formbox" name="form" method = "POST" action="parproj.php">
<select id="statutbox" name="statut" onChange= "this.form.submit()" style= "width:300px;padding:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow: 0 3px 0;cursor:pointer;">
<?php
$reponse2 = $bdd->query('select name from issue_statuses order by name asc;');
while ($donnees2 = $reponse2->fetch())
{
$selected2 = (isset($_POST['statut']) and $_POST['statut'] == $donnees2["name"])?'selected="selected"':'';
echo '<option value="'.$donnees2['name'].'" '.$selected2.'>'.$donnees2['name'].'</option>';
}
$reponse2->closeCursor(); // Termine le traitement de la requête
?>
</select>
</form>
<select id="categorybox" form="formbox" name="category" onChange= "this.form.submit()" style= "width:300px;padding:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow: 0 3px 0;cursor:pointer;">
<?php
while ($donnees3 = $reponsecat->fetch())
{
$selectedcat = (isset($_POST['category']) and $_POST['category'] == $donnees3["category"])?'selected="selected"':'';
echo '<option value="'.$donnees3['category'].'" '.$selectedcat.'>'.$donnees3['category'].'</option>';
}
$reponsecat->closeCursor(); // Termine le traitement de la requête
?>
</select>
有两种解决方案。查看下面的示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll to an element</title>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<style type="text/css">
#category {margin-top:500px}
#article {margin-top:250px}
</style>
</head>
<body>
<form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
<select name="status" id="status" onchange="this.form.submit();">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select><br />
<select name="category" id="category" onchange="this.form.submit();">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="submit" name="button" value="button" />
</form>
<div id="article">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<?php
if(isset($_POST["status"]) && $_POST["status"] != 0){
// 1st solution
header("Location: http://" . $_SERVER["HTTP_HOST"] . $_SERVER["PHP_SELF"] . "#category");
// or
// 2nd solution
echo '<script type="text/javascript">$("html, body").animate({scrollTop: $("#category").offset().top}, "slow");</script>';
}
?>
</body>
</html>
不要忘记注释你不会使用的解决方案。this.form.submit()是可选的，您可以通过常规的submit按钮提交表单。