Question

我有一个带有2个组合框的表格：statutbox和categorybox，statutbox位于我的页面顶部，但是categorybox位于中间。我的问题是当我从中间的类别框中选择一个项目时，页面刷新并返回顶部。那么如何保持相同的定位。这是我的代码：

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

Answer 1

有两种解决方案。请查看以下示例。

<!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按钮提交表单。

从组合框中选择项目后保持定位

1 个答案: