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

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");
  });
});

然后我得到 dropdown-display.php 中最近选择的下拉项的值在$q我在查询中使用它来过滤表结果:

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

Answer 1

我不确定你想做什么，用户可以选择日期，但不能选择名称(你正在使用 php 中的所有值来设置它)。但是除非选择了名称，否则您不想对日期执行任何操作？那为什么一开始就给它设置值呢？当用户更改名称时，日期会被设置，不是吗？

无论如何；当用户更改任一选择项时，它将使用以下代码调用 showUser(如果日期参数为空，则不发送日期参数):

您必须从 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
});