javascript - Filtering dropdown based on another dropdown selection

[ad_1]

I have 2 separate dropdown lists. I need to get each dropdown to filter each other. Every example I have seen so far is an example for dropdowns that have the options hard-coded in. Mine uses a query to populate the options.

So how could I correctly have each dropdown menu filter each other?

Here is my HTML for the dropdowns:

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

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

Code that runs each time the dropdown is changed:

if (window.XMLHttpRequest) 
 // code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp = new XMLHttpRequest();
 
 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);

 
 

 // ---- Gets value of collector dropdown selection -----
 var e = document.getElementById("collector").value;

 $.ajax(
 type: 'POST',
 url: 'index.php',
 data: e,
 success: function(response) 
 console.log(e);
 
 ); 

 // ---- Gets value of the current selection in any of the dropdowns ---- 
 xmlhttp.open("GET","dropdown-display.php?q="+str,true);
 xmlhttp.send();

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

Query on my index.php page:

$value = ($_GET['e']);

$billdate = "SELECT [Date]
 FROM [vExample]
 WHERE [Collector Name] = '$value'";

I don't want to send the value to my dropdown-display.php page since my queries that populate the dropdowns are on my index.php page. However, if I put the value variable in the query, then it runs that query on load before a collector selection can be made and my bill date dropdown will then not be populated.

[ad_2]

لینک منبع