Question

所以我在index.php上创建了四个下拉列表

<select name="filter_month" class="filters">
    <option>Select a Month</option>
    <option value="1">January</option>
    <option value="2">February</option>
    ....
</select>
<select name="filter_year" class="fitlers">
    <option>Select a Year</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
</select> 
<select name="filter_category" class="filters">
    <option>Select a Category</option>
    <option value="1">Running</option>
    <option value="2">Trail Running</option>
</select>
<select name="filter_country" class="filters">
    <option>Select a Country</option>
    <option value="1">Canada</option>
    <option value="2">United States</option>
</select>

现在我不想做的是从下拉列表中创建一个包含每个选定值的过滤器，并将帖子发送到filters.php

$(function) {

   $('.filters').on('change', function(){
      // How send value from each Dropdown?
   });

}

on filters.php我创建了这段代码，如果我选择了这些选项中的返回数据（$ mm，$ yy，$ cat，$ country）

<?php 

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

   $mm      = $_POST['filter_month'];
   $yy      = $_POST['filter_year'];
   $cat     = $_POST['filter_category'];
   $country = $_POST['filter_country'];

   // ... connection to database 
   $query = "how can filter by month, year, category and country";
   // ... Execute query
   // ... while ...
   echo $query; 
  // ... end while ...
}

谢谢！

Answer 1

您应该将选择放在HTML表单中（例如，标识为myForm，并使用jQuery发送。

$(function) {
    $('.filters').on('change', function(){
        $('#myForm').submit();
    });
}

Answer 2

首先为每个选项提供ID，如下所示

<select name="filter_month" id="filter_month" class="filters">
    <option>Select a Month</option>
    <option value="1">January</option>
    <option value="2">February</option>
    ....
</select>
<select name="filter_year" id="filter_year" class="fitlers">
    <option>Select a Year</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
</select> 
<select name="filter_category" id="filter_category" class="filters">
    <option>Select a Category</option>
    <option value="1">Running</option>
    <option value="2">Trail Running</option>
</select>
<select name="filter_country" id="filter_country" class="filters">
    <option>Select a Country</option>
    <option value="1">Canada</option>
    <option value="2">United States</option>
</select>

在jQuery代码中

 <script>
    $(function) {
        $('.filters').on('change', function () {
            $.ajax({
                type: 'POST',
                url: 'filters.php',
                data: {
                    filter_month: $("#filter_month").val(),
                    filter_year: $("#filter_year").val(),
                    filter_category: $("#filter_category").val(),
                    filter_country: $("#filter_country").val()
                },
                success: function (data) {
                    console.log(data);   
                }});
        });
    }
</script>

服务器端代码

<?php 

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

   $mm      = $_POST['filter_month'];
   $yy      = $_POST['filter_year'];
   $cat     = $_POST['filter_category'];
   $country = $_POST['filter_country'];

   // ... connection to database 
   $query = "how can filter by month, year, category and country";
   // ... Execute query

   // ... while ...
?>
put html code here and set the values
<?php

  // ... end while ...
}

如何提交多个下拉变更

2 个答案: