javascript - 使用下拉列表动态更改 PHP Mysql 查询

Question

我有一个下拉列表，需要动态更改以下 php mysql 查询。特别是 WHERE 部分。因此，下拉列表中有 CATERING、ENTERTAINMENT、VACATIONS 等。因此，如果有人选择 VACATIONS，下面的查询将用 tblclients.category = 'Vacations' 交换 Entertainment，页面上的结果将发生变化。

PHP

$query = mysql_query("SELECT * FROM tblClients  WHERE tblclients.package =  'standard' and tblclients.category = 'Entertainment' LIMIT 0, 9", $connection);

JQUERY - 我想出了如何让以下脚本知道选择了哪个下拉列表选项，但只想出了如何显示/隐藏 DIV。

  <script>  
$(document).ready(function(){

    $('.dropdown .Catering').click(function(){
    $('#page_featured_container').show();

  }); 
    $('.dropdown .Entertainment').click(function(){
    $('#page_featured_container').show();

  }); 

        $('.dropdown .Vacations').click(function(){
    $('#page_featured_container').show();

  }); 
  </script> 

HTML仅供完整引用，“我的下拉列表”看起来像这样。

    <section class="main">
        <div class="wrapper">
            <div id="dd" class="wrapper-dropdown-3" tabindex="1">
                <span>View By Category</span>
                <ul class="dropdown">
            <?php while ($rows = mysql_fetch_array($query_category)) { ?>
                    <li><a class="<?php echo $rows['category']; ?>"><?php echo $rows['category']; ?></a></li>
            <?php } ?>  
            </ul>
            </div>
        ​</div>
    </section>

所以，理论上，我的 JQUERY 会喜欢这个......

  <script>  
$(document).ready(function(){

    $('.dropdown .Catering').click(function(){
    CHANGE PHP WHERE STATEMENT AND DISPLAY NEW RESULTS.

Answer 1

您可以通过使用带有 jquery 的 Ajax 查询来执行此操作:

$(".dropdown .Catering").on("click", function()
{
   // getting the classname of clicked category to write your query
   var category = $(this).attr("class");
   $.ajax
   ({
       url:"controller.php?category="+category, // supposed you grab the query like that
       method: "get", // or post as you want
       success: function(data) // where data is the php returned newest list
       {
           // this line will overwrite the html content of 'page_featured_container'
           $("#page_featured_container").html(data);
       }
   });
});

如果您喜欢使用 POST 方法 您必须添加:

method: "post",
data: {category: category},