Question

我有一个产品展示页面，我需要根据过滤器（如产品系列类型等）过滤产品，而无需提交按钮。我使用单个下拉列表获取了要过滤的代码，但不能用于多个下拉列表。

这是我的代码，下拉列表代码：

 {
  "path": "/OpenWeather",
  "target": {
    "type": "destination",
    "name": "OpenWeather",
    "entryPath": "/"
  },
  "description": "Open weather API"}

过滤器代码

<div class="col-md-3 col-sm-6 col-xs-6" id="fil" >
    <form method="post" id="report_filter" action="<?= $_SERVER['PHP_SELF'];?>" >
        <select name="name" onchange="document.getElementById('report_filter').submit();">
            <option>Product Family</option>
            <?php 
                $qry="select * from productfamily";
                $ex=mysqli_query($con,$qry);
                while($row=mysqli_fetch_assoc($ex))
                {
                    echo "<option>".$row['prod_family']."</option>";

                }
            ?>
        </select>
    </form>
</div>
<div class="col-md-3 col-sm-6 col-xs-6" id="fil">
    <form method="post" id="report_filter" action="<?= $_SERVER['PHP_SELF'];?>" >
        <select name="name" onchange="document.getElementById('report_filter').submit();">
            <option>Surface Finish</option>
            <?php 
                $qry="select * from surfacefinish";
                $ex=mysqli_query($con,$qry);
                while($row=mysqli_fetch_assoc($ex))
                {
                    echo "<option>".$row['sur_finish']."</option>";

                }
            ?>
        </select>
    <form>
</div>

Answer 1

通常，你可以在head标签内写javascript（ajax）。并且不要忘记附加jquery

    <head>
    <script type='text/javascript' src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
    <script type='text/javascript'>
     function chg(isi){
        $.ajax({
            // this url to this page again is no problem
            url: "http://<?php echo $_SERVER['SERVER_NAME']; ?>/code/for/the/filter.php",
            //this methos is post, so you can use $_POST['name']
            type: 'POST',
            // your code is compatible with this, can catch nams as post
            data: "name=" + isi,
            // some alert appeared but it's blank its mean its no problem
            success: function(data){
                $("#here").html(data).show;
                //to check if data error
            }
        });
     }
    </script>
    </head>
    <body>
    <select name="name" onchange="chg(this.value);">
        <option>Product Family</option>
        <?php 
            $qry="select * from productfamily";
            $ex=mysqli_query($con,$qry);
            while($row=mysqli_fetch_assoc($ex))
            {
                echo "<option>".$row['prod_family']."</option>";

            }
         ?>
     </select>
     <div class='here'></div>
     </body>
     // dont forget code for the filter down here

依赖于ajax脚本，我写了data: "name=" + isi所以请回到url，因为这个案例再次出现在这个页面上，isi是您的选择name='name' <的值/ p>

希望它能帮助

没有提交按钮的带有多个下拉列表的php过滤器

1 个答案: