获取选择选项的值而无需刷新页面

时间:2019-02-04 05:45:59

标签: php html drop-down-menu

我的问题很简单。

这是我的代码:

<?php 
    include "../../../koneksi.php";  
?>
<html>
<body>
<form action="" method="POST">
    <?php  
        if($_POST['menu'] === "lunchmenu"){
            $result = mysqli_query($conn,"SELECT * FROM tb_lunch");
        } else{
            $result = mysqli_query($conn,"SELECT * FROM tb_dinner");
        }
    ?>
    <table>
        <tr>
            <td>Kategori Menu</td>
            <td>
                <select name="menu" onchange="this.form.submit();">
                    <option selected="true" disabled>-- Menu Category --</option>
                    <option value="lunchmenu">Lunch Menu </option>
                    <option value="dinnermenu">Dinner Menu </option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Menu Name</td>
            <td>
                <select>
                    <?php  
                    if($_POST['menu'] === "lunchmenu")
                        $i = 1;
                        while ( $row = mysqli_fetch_assoc($result)):
                    ?>
                    <option> <?=$row[menu_name]; ?></option>
                    <?php       
                        $i++;
                        endwhile; 
                    ?>
                    <?php
                    if($_POST['menu'] === "dinnermenu")
                        $i = 1;
                        while ( $row = mysqli_fetch_assoc($result)):
                    ?>
                    <option> <?=$row[menu_name]; ?></option>
                    <?php       
                        $i++;
                        endwhile; 
                    ?>
                </select>
            </td>
        </tr>
    </table>
</form>
</body>
</html>

我想要的结果非常简单。当我从“菜单类别”中选择“午餐菜单”时,它将显示可用的午餐菜单。我在这里没问题。我的问题是:选择菜单(午餐或晚餐)后,页面会刷新,并且会像--Menu Category--的默认值一样返回,尽管它在下面显示了正确的菜单。

我认为问题出在onchange="this.form.submit();

你们对此有什么解决方案吗?

2 个答案:

答案 0 :(得分:0)

您可以维护两个空变量,一个用于午餐菜单,另一个用于晚餐菜单,一个用于默认菜单,根据以下POST变量将这些变量更改为“ selected”和“”。

当$ _POST ['menu'] ===“ lunchmenu”时,$ lunchmenu从“”更改为“ selected”
当$ _POST ['menu'] ===“ dinnermenu”

时,$ dinnermenu从“”更改为“ selected”

<?php 
        include "../../../koneksi.php";  
    ?>
    <html>
    <body>
    <form action="" method="POST">
        <?php  
            $defaultmenu = 'selected';
            $lunchmenu = '';
            $dinnermenu = ''; 
            if($_POST['menu'] === "lunchmenu"){
    $lunchmenu = "selected"';
    $defaultmenu  = '';
                $result = mysqli_query($conn,"SELECT * FROM tb_lunch");
            } else{
                $dinnermenu = "selected"';
$defaultmenu  = '';
                $result = mysqli_query($conn,"SELECT * FROM tb_dinner");
            }
        ?>
        <table>
            <tr>
                <td>Kategori Menu</td>
                <td>
                    <select name="menu" onchange="this.form.submit();">
                        <option <?php echo $defaultmenu ;?> disabled >-- Menu Category --</option>
                        <option value="lunchmenu" <?php echo $lunchmenu;?> > Lunch Menu </option>
                        <option value="dinnermenu"  <?php echo $dinnermenu;?>  > Dinner Menu </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Menu Name</td>
                <td>
                    <select>
                        <?php  
                        if($_POST['menu'] === "lunchmenu")
                            $i = 1;
                            while ( $row = mysqli_fetch_assoc($result)):
                        ?>
                        <option> <?=$row[menu_name]; ?></option>
                        <?php       
                            $i++;
                            endwhile; 
                        ?>
                        <?php
                        if($_POST['menu'] === "dinnermenu")
                            $i = 1;
                            while ( $row = mysqli_fetch_assoc($result)):
                        ?>
                        <option> <?=$row[menu_name]; ?></option>
                        <?php       
                            $i++;
                            endwhile; 
                        ?>
                    </select>
                </td>
            </tr>
        </table>
    </form>
     
    <script>
      $( document ).ready(function() {
        $('html, body').animate({
          scrollTop: $("#menuform").offset().top
          }, 2000);
          return false;
      });
    </script>
    </body>
    </html>

答案 1 :(得分:0)

您应该使用Ajax。它将根据更改为您提供值,而无需刷新页面。

    $.ajax({
type: "GET",
url: 'test.php', // Here is your link which will give you desired values.
success: function(data){
    alert(data);
},
error: function(){
 alert(data)
 }
});

将其绑定到函数中,然后从下拉菜单的onchange事件中调用该函数。