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中的函数外部函数调用，在选择名称后过滤日期下拉列表：

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

根据多个下拉列表选择筛选表结果

1 个答案: