在下拉框中按选定月份过滤表

Question

我有一个下拉列表，通过我的数据库中的 teamCode 过滤表

这里是下拉列表的 html：

<ul class="navbar-nav mr-auto">    <!--this is a mdb bootstrap dropdown-->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-555" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">INSULATION
        </a>

        <div class="dropdown-menu dropdown-secondary" aria-labelledby="navbarDropdownMenuLink-555">
          <a class="dropdown-item" id="gableTeam" class="gableTeam" href="#">GABLE</a>
          <a class="dropdown-item" id="holingTeam" class="holingTeam" href="#">HOLING</a>
          <a class="dropdown-item" id="outsideInsTeam" class="outsideInsTeam" href="#">OUTSIDE INSULATION</a>
          <a class="dropdown-item" id="insideInsTeam" class="insideInsTeam" href="#">INSIDE INSULATION</a>
        </div>
     </li>
</ul>

我将只为 ID 为 gableTeam 的 <a> 标签制作一个示例

这是 gableTeam 的 ajax：

    $(document).on('click','#gableTeam',function(){
    var Fmonth = $('#Fmonth').val();
        $.ajax({
            type: 'post',
            url: 'read_gable.php',
            data: {
                'month' :Fmonth
            },

            success: function(data){
                $("#containerDiv").html(data)
                $("#containerDiv").hide().fadeIn(500)  
                //alert(Fmonth);
            },
            error:function(data){
                alert('Failed');
            }
    })
});

我设置检查下拉列表#Fmonth 的值，以过滤点击#gableTeam 时表格中显示的月份。

这是我的下拉框 #Fmonth 的 html：

<select class="form-control" width="50px" name="Fmonth" id="Fmonth">
      <option value="1">January</option>
      <option value="2">February</option>
      <option value="3">March</option>
      <option value="4">April</option>
      <option value="5">May</option>
      <option value="6">June</option>
      <option value="7">July</option>
      <option value="8">August</option>
      <option value="9">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
</select>

这是我用于 read_gable.php 的 php（它只会显示一行，仅作为示例）：

    <?php
$Fmonth = @$_REQUEST["month"];
try {
            $pdo = new PDO('mysql:host=localhost:3306;dbname=*****;', '*****', '***' );
            $pdo->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
            $stmt = $pdo->prepare(
                " SELECT * from mbwa WHERE month = :Fmonth AND teamCode = '313'"
        );
        $stmt->bindValue( ':Fmonth', $Fmonth, PDO::PARAM_STR );

        $flag = $stmt->execute();
        if ( !$flag ) {
            $info = $stmt->errorInfo();
            exit( $info[2] );
        }
        while ( $row = $stmt->fetch( PDO::FETCH_ASSOC ) ) {

                @$tbody .='<tr>';

                $tbody .='<td style="height:92px;background-color:#e0ebeb;" id="1" >'.$row["DAY1"].'</td>';
                $tbody .='<td style="height:92px;background-color:#e0ebeb;" id="2" >'.$row["DAY2"].'</td>';
                $tbody .='<td style="height:92px;background-color:#e0ebeb;" id="3" >'.$row["DAY3"].'</td>';
                $tbody .='<td style="height:92px;background-color:#e0ebeb;" id="4" >'.$row["DAY4"].'</td>';
                $tbody .='<td style="height:92px;background-color:#e0ebeb;" id="5" >'.$row["DAY5"].'</td>';

                @$tbody .='</tr>';
             }  
        }
        catch ( PDOException $e ) {
        echo $e->getMessage();
        $pdo = null;
        }   
?>

现在，当下拉列表Fmonth 发生变化时，我如何过滤我的表格？它必须只过滤<li> 中的选定团队，即gableTeam。 （我只放了一个团队作为示例，但在我的真实代码中有 10 个团队需要过滤）。

我不知道该放什么

    $(document).on('change','#Fmonth',function(){
    ////what should be in here

});

有什么帮助吗？

Answer 1

我假设month 将与您所有的teams 相同。所以，你可以使用a标签和onclick，你可以得到id，即teamname，然后在dropdown更改时，你可以将month和teamname都传递到你的页面你是fetching 的数据取决于那个。

相关代码：

var teamname = "";
// onclick of 'a' event
$(document).on('click', 'a', function() {
    //getting id value i.e: your teamname
    var teamname = $(this).attr('id');

    //getting fmonth value on change event    
    $('#Fmonth').change(function() {
        var Fmonth = $('#Fmonth').val();
        alert(Fmonth);
        alert(teamname);
        if (teamname != '') {
            $.ajax({
                type: 'post',
                url: 'read_gable.php',
                data: {
                    'month': Fmonth,
                    'team': teamname //<-passing team value
                },

                success: function(data) {
                    $("#containerDiv").html(data)
                    $("#containerDiv").hide().fadeIn(500)
                    //alert(Fmonth);
                },
                error: function(data) {
                    alert('Failed');
                }
            });
        }
    });

});