複数のドロップダウン選択に基づくテーブル結果のフィルタリング

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> 

JavaScriptの名前の選択が行われた後、日付のドロップダウンフィルタselectタグとのonchange内のJavaScript関数の外でのonchangeと呼ばれているheadタグ内：

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