根据多个下拉选项过滤表结果

Question

我有2个HTML下拉列表，名称和日期。 选择一个名称，将仅过滤与该名称对应的日期的日期下拉列表。 每次选择之后，结果都会被过滤并显示在表格中。

例如，如果我选择“ Name A ，则表将显示“ Name A所有结果。 然后，如果之后选择“ Date A ，则表格将显示“ Date A所有结果。 但是，我希望它进行过滤，以便如果首先选择一个名称，然后选择一个日期，则它将在表结果中同时过滤。

这样：如果选择了Name A则选择了Date A ，该表将显示Name A和Date A所有结果。

目前，我仅使用变量$q存储下拉列表的当前选择。 我该怎么做，以便它能够过滤多个选择的结果？

HTML下拉列表：

<form name="testForm" action="">
    <select id="collector" onchange="showUser(this.value)">             
        <option value="" selected="selected" disabled="disabled">Collector Name</option>
        <?php foreach($collect->fetchAll() as $name) { ?>
            <option class="choice" value="<?php echo htmlspecialchars($name['Collector Name']);?>"><?php echo $name['Collector Name'];?></option>
        <?php } ?>
    </select>


    <select id="date" onchange="showUser(this.value)">              
        <option value="" selected="selected" disabled="disabled">Bill Date</option>
        <?php foreach($bill_date->fetchAll() as $date) { ?>
            <option class="choice" value="<?php echo $date['Date'];?>"><?php echo $date['Date'];?></option>
        <?php } ?>
    </select>
</form>

head标签中的JavaScript在select标签中用onchange调用，而onchange中的JavaScript外部函数在选择名称后过滤日期下拉列表：

function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("txtHint").innerHTML = this.responseText;

            var newTableObject = document.getElementById('billing_table');
            sorttable.makeSortable(newTableObject);

        }
    }

        xmlhttp.open("GET","dropdown-display.php?q="+str,true);
        xmlhttp.send();

        document.getElementById('billing_table').style.display = 'none';

}
}

$(document).ready(function(){

    $("#collector").change(function(e){
        $.post('index-ajax.php',{filter:'Name',by:$(this).val()},function(data){
            $("#date .choice").hide();
            $.each(data, function(key,row) {
       //       $("#date option[value='"+ row.item +"']").show();
                $("#date option").filter(function(i){
                    return $(this).attr("value").indexOf( row.item ) != -1;
                }).show();
            });
        },"JSON");
  });
});

然后，我在$q dropdown-display.php中获得最近选择的下拉项的值，该值在查询中用于过滤表结果：

$q = ($_GET['q']);

Answer 1

我不确定您要做什么，用户可以选择日期，但不能选择名称（您可以使用php中的所有值进行设置）。 但是，除非选择名称，否则您不希望对日期进行任何操作？ 那为什么要用开始时设置的值呢？ 当用户更改名称时，是否设置了日期？

无论如何; 当用户更改其中一个选择项时，它将使用以下代码调用showUser（如果为空，则不发送date参数）：

您必须从html中删除onchange="showUser(this.value)" 。

function showUser(collector,date) {
  $('#billing_table').hide();
  if (collector == "") {
      document.getElementById("txtHint").innerHTML = "";
      return;
  } else { 
    $.ajax(
      "dropdown-display.php"
      ,{
        data:{
          q:collector
          ,data:date||undefined//will not send dae if date is "" or falsy
        }
      }
    ).then(
      function(responseText){
        $("#txtHint").html(responseText);
        sorttable.makeSortable($('#billing_table')[0]);
      }
      ,function(error){
        console.warn("something went wrong:",error);
        debugger;//this will pause if you have dev tools open (press F12)
      }
    )

  }
}

$(document).ready(function(){
  $("#collector, #date").change(function(e){
    showUser(
      $("#collector").val()
      ,$("#date").val()
    );
  });
  //...other code
});